成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

经验杂笔

分段图

最新文章

经验杂笔
当前位置: 首页 » 大学杂谈 » 经验杂笔 » 网页自适应解决iPhone手机横屏字体变大问题

网页自适应解决iPhone手机横屏字体变大问题

编辑:狂族晨曦 来源:经验杂笔 日期:2016-03-31 阅读: 2,068 次 2 条评论 » 百度已收录

先森在完成网站自适应的过程中,遇到了很多大大小小的问题,其中一个问题就是横屏字体变大的问题。这个问题一碰到感觉很麻烦,其实解决方法却很简单。

网页自适应解决iPhone手机横屏字体变大问题

网页自适应解决iPhone手机横屏字体变大问题

网上搜索结果中有很多答案,但是经过先森实践后,最终觉得有用的是在style.css中添加以下代码:

/*
**修复iPhone横屏后字体变大问题
**http://www.capjsj.cn/wyzshjj_iphone_sjhpztbdwt.html
*/
@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内核,但是先森调试的时候用的是iPhone,所以这里就只说iPhone了,而且好像只有iPhone容易遇到这个问题。

WebKit内核的浏览器中规定,当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px。字体也会随着网页的变大而变大,这也是当你手机横屏时,字体变大的原因。而控制这个功能的,就是CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 则关闭字体大小自动调整功能。

大家可以看出,先森在上面提出的代码中,用的是100%而不是none,这是为什么呢?先森看了一篇博文,当时没有收藏,所以现在也不知道是哪看到的了。博主提出,添加none会有问题,所以建议设置为100%。当时博主没有说是什么问题,我们想想也就明白了。如果设置none的话,随着网页变大,你的文字还是不会变化,这就导致用户体验不好了。所以也有很多回答建议不要讲该属性设置为全局属性。

先森最初找到的代码也是设置的none,但是看了这篇文章后先森将其改为100%。其实用none也没有问题,因为上面的四行代码是判断浏览器宽度后生效的。这一点就见仁见智了,根据大家的实际情况来使用。

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共1287个字
转载请注明出处来自http://www.capjsj.cn/wyzshjj_iphone_sjhpztbdwt.html
已有 2 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
狂族晨曦的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 握兰的头像

    学习了,很不错的一个站,收藏了

    2016-04-02 08:42 回复
官方微信
发表评论 返回顶部