解决UIWebView旋转成横屏后字体会放大的策略

在不少App中,会有license或者一些其他的很长的文本需要显示。

 

这种需求一般有两种方案:

  • 采用UITextView
  • 采用UIWebView

 

一:UITextView

这可能是大部分开发者首先想到的方法,非常简单,但是也有以下一些问题

  1. 文本很长的时候,滚动时会卡顿(还没有想到什么解决方案)
  2. 如果需要屏幕旋转时,会有一些想不到的问题,下面图片展示了在横屏后不做任何滚动然后恢复到竖屏的过程,可以看到文字出现偏移。

可能有些人会觉得这会影响客户体验(其实很多App在license这页并不支持屏幕旋转,也就没有这个问题)。

这个问题要想解决的话,貌似比较棘手。你既不能确定旋转后有没有滚动操作,也不能准确计算每个字符准确的显示位置(至少我现在还不知道)。

 

二: UIWebView

使用UIWebView可以避免滚动卡顿问题,也可以避免文本移位的问题

但是在默认的情况下,却有新的问题出现,即从竖屏转成横屏时,字体会变大变粗。用safari浏览网页时,是有这种特征的。

查了很多网站,都说设置

 -webkit-text-size-adjust: none;

没有很完整的代码,本人愚钝,对html也非常不熟悉,多次尝试都未果。

后来在公司大神的帮助下,借助google,终于找到了一个解决方案,代码如下

<html>
    <head>
        //<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
       <style language="text/css"> .lisence {
       color : white; font
-size : 14px; -webkit-text-size-adjust: none; -webkit-font-smoothing: none; //width : 100%; //height : 100%; //word-break: normal; //word-wrap: break-word; } </style> </head> <body> <div class='lisence'> text… </div> </body> </html>

只需要将红色地方替代成自己的文字就可以了

如果UIWebView的frame不是320像素的宽度,那么width=device-width就要去掉

 

posted @ 2014-02-14 18:52  程序熊  阅读(1169)  评论(0编辑  收藏  举报