会员注册关闭
网页自适应解决iPhone苹果的safari浏览器手机横屏字体变大问题
作者:未知来源:网络收集
整理日期:2019-12-20
在style.css中添加以下代码:
css 代码复制内容到剪贴板
- /*
- **修复iPhone横屏后字体变大
- */
- @media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}
- @media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}
- @media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:100%}}
其中最重要的代码这个属性:
-webkit-text-size-adjust
“-webkit-text-size-adjust”是CSS3中的一个属性。这个属性,从字面上来看,就是“WebKit的文字大小调整”的意思。
什么是WebKit呢?
这是一种开源的浏览器引擎,而苹果的safari浏览器用的就是这种内核。其实chrome、Android的也是WebKit内核。
在WebKit内核的浏览器中规定,当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px。字体也会随着网页的变大而变大,这也是当你手机横屏时,字体变大的原因。而控制这个功能的,就是CSS 中的 -webkit-text-size-adjust。
text-size-adjust 设为 none 或者 100% 则关闭字体大小自动调整功能。
获得更多 -> 应用技巧 -> 常用技巧责任编辑: webmaster >>> 百度上搜索 谷歌上搜索
点击复制本连接 (http://www.hugesky.com/showarticle.php?id=6997)>>> 相关资讯:
【声明】: 以上文章或资料除注明为电脑技巧原创或编辑整理外,均为网络收集整理或网友推荐。以上内容以共享、参考、研究为目的,不存在任何商业目的。 未注明作者或出处的文章,可能资料来源不规范。如有涉及版权请给予及时联系更正或予以删除。 |