关于苹果手机页面中字体大小显示不正确的问题

最新推荐文章于 2023-03-03 18:27:08 发布
最新推荐文章于 2023-03-03 18:27:08 发布
阅读量1w 收藏 2
点赞数 1
分类专栏： 移动端开发 文章标签： html ios css 移动 字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bitpzz/article/details/52152656
版权

移动端开发中，你在ios手机上的页面是否出现过文字大小显示不正确的情况？

博主碰到过两种这样的情况

第一种：

如果出现这种bug，先试试给body加max-height:99999px;min-height:1px;
参考链接:https://github.com/amfe/article/issues/10

在此不做过多赘述

第二中：

如果你写的是响应式页面，在手机和pc端通过不同的css类来控制样式，（我当时是在html标签中加的样式类）

此时ios中的字体大小不能使用css来改变，即更改css中font-size以后不生效，即使!improtant也不可以。

我的解决办法是取消css类的控制，改成媒体查询


第一次写博客，希望大家多多支持，有什么意见或者建议大家一起讨论


bitpzz
关注
专栏目录
uniapp(全端兼容) - 最新实现全局设置修改字体大小功能，统一修改全部页面所有文字的大小（标准/小/中/大字号切换，用户修改后整个项目立即生效）设置应用字体的大小（详细示例代码，一键复制开箱即用
高级前端工程师
04-02 4121
uni-app，支付宝微信小程序，h5，手机端H5网页，移动端网站，安卓app，ios苹果app，nvue，全局设置字体大小，退出后还能记录字号大小，uniApp将全部页面的字体字号进行修改，uniapp设置改变全局字体大小功能，动态调整应用字体大小，详细教程，动态显示字体大小，可调整显示字体大小，如何解决不同端字体大小的问题，除了rem还有什么方法，设置全局字体大小，用户设置字号大小，应用字体大中小，实现用户全局设置应用字体大小，老年模式字体设置思路，h5端不行怎么办，移动端不生效，修改全局字号，一键改整
在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字体调大 导致页面错乱
qq_37732761的博客
03-12 1417
认定了 就要好好的珍惜对待，人生不容辜负，你必须要更加努力 。加油 骚年 在做vue h5 时因改变手机字体导致页面布局错乱 比如在微信公众号中 放入h5 客户把手机字体或者微信字体调大 导致页面错乱 这是微信调字体 会导致页面错乱 这里介绍解决ios 和 android 这个问题的方法 //IOS下 在app.vue中的 样式下写入这行代码 可解决ios 显示问题 记住一定不要加 scoped body { -webkit-text-size-adjust: 100% !important;
iOS wkWebview调整html文字大小以及文字两端对齐
weixin_30908941的博客
06-25 705
1.问题：后台给的HTML标签字符串用wkwebview加载时需要适当增大文字大小以及将文字两端对齐 修改前效果： 修改后效果： 解决方法：文字增大在wk代理方法实现，使用js语句；文本两端对齐使用添加css样式实现 2.实现方法 代码1： #pragma mark -webView delegate - (void)webView:(WKWebView *)w...
iPhone 手机浏览器 font-size 失效问题
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
05-15 1443
问题 电脑端浏览器显示正常，iPhone手机浏览器却异常，如下图 用Safari调试iPhone手机网页，可以看到设置了 font-size: 12px 但实际浏览器渲染的字体大小却是 16px 解析 因为 Font Boosting 字体提升 Webkit 给移动端浏览器专门提供的属性 ，因为移动端屏幕小，原始页面宽度大，在移动端浏览器浏览网页时的字体会比较小，看不清，Font Boosting 会自动把字体变大，方便浏览。 解决 直接为该失效元素加一行代码： text-size-adjust:
css text 大小统一样式,css-iPhone上的字体大小呈现不一致
weixin_39886547的博客
08-03 503
Mobile Safari会尝试调整内容，以便默认情况下可以在屏幕上读取它-与其他浏览器具有不同的默认样式。我不知道确切的规则-但是当涉及到字体大小时，它看起来像这样工作：段落，列表项或其他“文本”元素内的文本：应用作者的样式而不进行调整。DIV或其他非特定元素内的文本：根据Mobile Safari的规则，视为“纯文本”并“调整”大小。所以-简短的答案是，将文本包装在一个段落中，然后将font-...
html苹果里放大,一个有关字体在iPhone上变大了的问题_html/css_WEB-ITnose
weixin_42501881的博客
06-15 715
当我部署完自己的第一篇技术博用手机测试时,发现其中的代码部分字体明显变大了,和周围格格不入.因为博客主题是自己设计实现的,这个明显的样式问题就像是一根来挑衅的鱼刺,让人甚是不爽.具体表现如下图左这到底是怎么回事呢?我对该部分的相关样式属性定义如下:font-size: 0.8rem;font-family: PT Mono, Consolas, Monaco, Menlo, monospace;按...
ios 载入html 尺寸,iOS WKWebView加载HTML字体大小问题
weixin_29359133的博客
05-31 697
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].app...
iOS和android h5字体差异,关于移动hybrid开发中H5页面的字体应与系统保持一致的问题...
weixin_27310985的博客
05-26 1389
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？0、问题来源在移动hybrid开发，也就是说，部分页面会使用html+css+javascript技术来制作，例如个人中心，收藏页面等。一般来说，移动端都会将字体设置为system系统默认类型。起初，愚钝的我认为，只要在css里不设置任何字体，将会默认使用系统默认字体。然而结果并未如我所想，页面出来后，中文、英文和数字几...
android iphone字体,网站中的字体设置--兼容苹果、pc、安卓系统的字体设置
weixin_42527401的博客
05-25 2215
在网站设计制作中很多人会遇到一个问题：设计图和实际出来的网站的页面字体差别很大？苹果、pc、安卓以及各个浏览器显示都很不一样？这要从网站设计各个职能的人说起了，平面设计师设计完后不管了，丢给前端工程师开发h5代码。而前端设计师做完后又丢给程序开发写后台程序……最后修改的人很可能是前端设计师或者程序开发。不是贬低这两者(每个人注重点不同)，他们对视觉上的差别往往注意不到，尤其字体差异。写给网站平面视...
关于webview中安卓和苹果页面缩放不同的问题
weixin_43930769的博客
08-30 703
关于webview中安卓和苹果页面缩放的问题 这是我在工作中自己遇到的问题，踩到的坑 我遇到的问题是这样的，验证码用的是webView的组件，在运行时发现安卓和苹果的验证码的大小不一致，而且苹果的验证码还可以双击放大缩小，这我就纳闷了，安卓苹果明明用的一套代码，为什么安卓正常，苹果就抽疯了，结果查了好久发现是webview的一个属性的问题，就是scalesPageToFit，这个属性呢就是适配屏幕...
css苹果手机字号变大,css – 智能手机字体大小不一致
weixin_28702105的博客
08-04 1344
我正在调整一个网页，使其在智能手机上看起来不错。我已经在CSS文件中声明了一个@media部分，所以我可以指定这个页面的字体大小。这是媒体部分：@media screen and (max-device-width: 640px) {#TermsOfUse {padding: 0 2em 0 2em;margin-left: auto;margin-right: auto;color: #777;...
font-size 小于 12px 无效
Star丶Xing
05-06 1112
问题 测试在 Chrome 浏览器中，设置 font-size 小于 12px 时无效。 示例 在线运行 以下是在 Chrome 中运行的结果。可以看到 0px 是生效的，但是小于 12px 的设置，统统和 12px 的文字大小一样。 原因 Chrome 认为 12px 以下的字体阅读不舒适。所以默认限制字体不能小于12px，但是允许设置为 0px。 这个最小字号，在 chrome://sett...
移动端自适应但用户修改了手机的字体大小，导致项目中样式错乱
最新发布
fengxiaopeng74的博客
03-03 600
用户的手机设置了字体大小，会改变项目中得样式
H5 手机页面字体显示大小与css设置不一致，viewport影响font-size问题
Bonrui编程路
01-12 9066
css设置字体大小后在手机端查看字体偏大。经过排查排除css优先级和js的问题。 经过分析可能是浏览器的功能，经过搜索发现确实如此。 这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：这个特性是为用户因页面内容多而缩放页面导致字体变小看不清楚而设计的。目的是为了让用户缩放页面后保
前段开发【移动端字体问题】
罗忠浩的博客
03-17 1174
rem由来：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。 事故造成原因： 1.px单位在PC上很流行，在手机屏幕上一看，GG，同样的1
关于html移动端ios的一些问题
christyleylh的博客
04-28 1429
1.IOS字号适配发现问题，是在开发过程中，对比安卓端，iOS端字体的大小显示十分异常。找问题吧，查阅各种资料，索引到Font Boosting，它是指Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。节选一些评论：（1）WebKit 中应该有判断如果initial-scale=1时，不触发Font Boost...
移动端字体显示大小和css设置大小的不一致解决方案
热门推荐
04-29 1万+
出现问题 这几天在做移动端页面，研究了一下手淘的 flexible.js 并在自己项目中试行了一下，然后发现了一个纠结无比的问题，即：css里设置了字体大小，但是显示却非常诡异，用 “诡异” 来形容是因为这个问题在定位的时候真的无迹可寻。 探查原因 后来接触到了一个概念，终于了解了问题的本来面目。这个概念叫做 “Font Boosting”（文字爆炸）。 当 viewport 的 initial...
移动端布局 css 设置字体大小
04-19 356
@media (min-width:700px){html{font-size:27px;}} @media (min-width:640px) and (max-width:700px){html{font-size:25px;}} @media (min-width:630px) and (max-width:639px){html{font-size:23.66px;}} @media (m...
解决JasperReport 6+ PDF中文不显示问题：字体配置详解
"本文档提供了解决jasperreport6版本以上导出PDF时中文不显示问题的方法。由于jasperreport6以上版本不再使用旧的pdf font name和pdf encoding配置，而是采用新的font配置来处理字体，因此传统的通过iText jar包解决...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值