解决WebView旋转屏幕时文字变大的问题

有些同学会发现移动客户端请求的网页在旋转时会发生文字内容变大的情况,如下两张图的效果:


竖屏状态下的截图

横屏状态下文字变大

这是因为网页中缺少部分设置:
(1)首先要在<head></head>标签中加入如下的代码
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
(2)在css样式中加入body{-webkit-text-size-adjust: none;}即可,其中-webkit为css中兼容safari内核的标识。
或者在UIWebView的代理方法webViewDidFinishLoad中加入如下设置即可:

  • (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"webViewDidFinishLoad");
    NSString *jsstr = @"document.body.style.webkitTextSizeAdjust='none'";
    [webView stringByEvaluatingJavaScriptFromString:jsstr];
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • IOS之UIWebView的使用 刚接触IOS开发1年多,现在对于 混合式 移动端开发越来越流行,因为开发成本上、...
    学无止境666阅读 45,820评论 5 53
  • OS之UIWebView的使用 刚接触IOS开发1年多,现在对于 混合式 移动端开发越来越流行,因为开发成本上、速...
    知之未道阅读 1,667评论 0 4
  • 一、简介 近两年随着HTML5的迅速发展与日趋成熟,越来越多的移动开发者选择使用HTML5来进行混合开发,不仅节约...
    RainyGY阅读 1,892评论 1 12
  • 作者/胄宁 “哟,不知不觉已经走到这里了,那你回家吧,明天再见啦。”我对挽着我的胳膊小鸟依人的女友说道。 “哦,是...
    胄宁阅读 579评论 0 15
  • 昨晚因为记着今早要早起,一直来回折腾几次,生怕会晚了,结果是真的就晚了,这点还真的应验了你想什么,事情就会朝着你想...
    海过留痕燕过留声阅读 172评论 1 3