码迷,mamicode.com
首页 > Web开发 > 详细

UIWebView中字体自动放大问题的探究

时间:2015-06-28 17:11:52      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

前端时间在给客户端添加syntaxhighlighter JS插件时发现一个问题: 如果一段代码中有一行代码比较长,越出了屏幕,那么,整段代码的字体就会变大,对不上行号。
技术分享
技术分享

其实这个问题在客户端的软件详情页中也碰到过。软件详情页下方是关于软件的信息,整个信息表格是个table,当某项信息太长时,字体就会放大,整个table就变得非常难看。
技术分享

于是我添加了下面这段代码
#software_information tr th {
    white-space: nowrap;
    vertical-align: top;
}

#software_information tr td {
    word-break: break-all;
}
效果很好
技术分享


而这次,syntaxhighlighter处理过的代码片段其实也是一个table,左边的行号和右边的代码各是一个td。由此我想,是不是可以通过给代码强制换行解决这个问题呢?谷歌一下,尝试了几个换行方法后,发现都不太好使,会使行号和代码的对应关系错乱,后来,我在 这篇博客中找到错乱的原因。那么,现在该怎么办呢?有两个方法:1、改用可以自动换行的2.x版;2、坚持强制换行,但那样就要写大段js。这两个方法我都不喜欢。


那现在只能正面解决问题了。可是,问题的成因是什么呢?上次发现软件详情页的显示问题时我就认为可能跟iOS上的渲染有关系。于是我修改一下关键字,再谷歌一下,竟然发现有人遇到了 同样的问题!我在第二个解答下面的评论里找到了解决方法:
.syntaxhighlighter { -webkit-text-size-adjust: none; }
测试了一下,显示效果很好,没有字体大小的变化。

看来问题是出在-webkit-text-size-adjust这个属性上了,那么这个属性有什么用的呢?
查阅 Safari CSS,里面写道:
Specifies a size adjustment for displaying text content in Safari on iOS.
不够详细。继续搜索,找到了 这篇文章,里面提到
Mobile Safari on iPhone will automatically increase the size of small text
据此,对于这个显示问题的成因,我猜是这样的: 如果某个td太长,越出了屏幕,Safari就判断table是显示在更大的屏幕上的,文字就被自动放大了。而整个table同一列的td长度是一样的,所以其他行中同一列的td里的文字也会放大。

另外,根据文章所说,如果将-webkit-text-size-adjust设置为none的话,缩放时,文字就不会调节大小,所以我按照best practice(Bootstrap也是这样哦),修改了一下CSS:
body {
    /* ...... */
    -webkit-text-size-adjust: 100%;
}

显示正常。



参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
http://caniuse.com/#feat=text-size-adjust
http://stackoverflow.com/questions/15861093/what-does-webkit-text-size-adjust-do

UIWebView中字体自动放大问题的探究

标签:

原文地址:http://my.oschina.net/aetern/blog/471674

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!