有的网页中会使用"<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">"这个标签来设置网页的宽度,不过带来的问题是,如果展示这个webview的宽度不等于设备的宽度的时候,就会出现网页内容过宽左右可以滑动或者网页左右内容没有占满。找了一下,有两个解决方法:

1. 利用webview中的scrollview的zoom特性,这个方法会让网页内容变小

- (void)webViewDidFinishLoad:(UIWebView *)theWebView
{
CGSize contentSize = theWebView.scrollView.contentSize;
CGSize viewSize = self.view.bounds.size; float rw = viewSize.width / contentSize.width; theWebView.scrollView.minimumZoomScale = rw;
theWebView.scrollView.maximumZoomScale = rw;
theWebView.scrollView.zoomScale = rw;
}

2. 第二个方法,在客户端使用js重写meta标签,这个也是在webview的delegate的webViewDidFinished回调中调用;我们使用的这种方法来操作,内容不会变小

javascript = [NSString stringWithFormat:@"var viewPortTag=document.createElement('meta');  \
viewPortTag.id='viewport'; \
viewPortTag.name = 'viewport'; \
viewPortTag.content = 'width=%d; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'; \
document.getElementsByTagName('head')[0].appendChild(viewPortTag);" , (int)authWebView.bounds.size.width]; [authWebView stringByEvaluatingJavaScriptFromString:javascript];

参考:

1. http://stackoverflow.com/questions/10666484/html-content-fit-in-uiwebview-without-zooming-out

2. http://stackoverflow.com/questions/5594447/webpage-in-uiwebview-doesnt-autoresize-correctly-when-uiwebviews-width-is-less

3:http://m.blog.csdn.NET/blog/lihei12345/43565859

iOS中UIWebview中网页宽度自适应的问题的更多相关文章

  1. IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以

    IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.

  2. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  3. ios中UIWebview中加载本地文件

    [super viewDidLoad]; webview=[[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubvi ...

  4. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  5. IOS UIWebView截获html并修改便签内容,宽度自适应

    需求:混合应用UIWebView打开html后,UIWebView有左右滚动条,要去掉左右滚动效果:  方法:通过js截获UIWebView中的html,然后修改html标签内容:  实例代码:  服 ...

  6. iOS UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  7. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  8. Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  9. iOS 中UIWebView的cookie

    有关cookie是什么,大家可以自行百度,本文我获得cookie的目的是得到一个userID. 下面的是代码. - (void)getUserIDFromCookie { NSHTTPCookieSt ...

随机推荐

  1. redis系列:通过共同好友案例学习set命令

    前言 这一篇文章将讲述Redis中的set类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/learnW ...

  2. Android运行时Crash自动恢复框架-Recovery

    转自:http://zhengxiaoyong.me/2016/09/05/Android%E8%BF%90%E8%A1%8C%E6%97%B6Crash%E8%87%AA%E5%8A%A8%E6%8 ...

  3. Tomcat之NIO 启动与应用分析

    概述 从入门Web开始一直在使用Tomcat,随着对网络相关的知识的进一步了解,觉得越有必有去阅读一下常用的开源服务器的整个工作流程,以及使用场景,对比几款服务器的优劣势.最终根据合适的业务场景进行优 ...

  4. Linux6.7 安装图文

    Linux6.7 安装图文 选择第一个进行安装 1.  Install or upgrade an existing system   安装或升级系统 2.  Install system with ...

  5. 解决Navicat 连接服务器数据库报10060问题

    1.登录mysql,授予远程登录权限(确保mysql表里的登录user对应的host为 % 即可:若不是 % ,使用mysql的update更新对应host) mysql> use mysql; ...

  6. mysql设置最大连接数量

    mysql>mysql -uuser -ppassword(命令行登录MySQL) mysql>show variables like 'max_connections';(查可以看当前的 ...

  7. 《OD玩阿里云》搭建环境

    一.安装mysql 1. 解决乱码问题 http://www.ha97.com/5359.html http://blog.csdn.net/qiyuexuelang/article/details/ ...

  8. 简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页

    一.先在数据库中创建表格 在mysql中建users库并建立一个含有ID,username,email三个字段的user表 二.去vue的组件里面写页面的表单代码,注意form标签里的action需要 ...

  9. 3、kubernetes应用快速入门190625

    一.kubernetes应用入门 1.kubectl命令 Basic Commands create Create a resource from a file or from stdin. expo ...

  10. 洛谷P1318 积水面积

    题目描述 一组正整数,分别表示由正方体叠起的柱子的高度.若某高度值为\(x\),表示由\(x\)个正立方的方块迭起(如下图,\(0<=x<=5000\)).找出所有可能积水的地方(图中蓝色 ...