有的网页中会使用"<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. CodeForces 492E Vanya and Field (思维题)

    E. Vanya and Field time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

  3. [WPF自定义控件]从ContentControl开始入门自定义控件

    1. 前言 我去年写过一个在UWP自定义控件的系列博客,大部分的经验都可以用在WPF中(只有一点小区别).这篇文章的目的是快速入门自定义控件的开发,所以尽量精简了篇幅,更深入的概念在以后介绍各控件的文 ...

  4. Syslog+Fluentd+InfluxDB日志收集系统搭建

    环境配置 节点 配置 类型 操作系统 Sched 2G 2CPU 50GB ens3=>192.168.200.11 KVM虚拟机 CentOS 7 Nova 4G 2CPU 50GB ens3 ...

  5. go语言实战教程:实战项目资源导入和项目框架搭建

    从本节内容开始,我们将利用我们所学习的Iris框架的相关知识,进行实战项目开发. 实战项目框架搭建 我们的实战项目是使用Iris框架开发一个关于本地服务平台的后台管理平台.平台中可以管理用户.商品.商 ...

  6. 在pom包中添加spring-boot-starter-test包引用

    有很多网友会时不时的问我,spring boot项目如何测试,如何部署,在生产中有什么好的部署方案吗?这篇文章就来介绍一下spring boot 如何开发.调试.打包到最后的投产上线. 开发阶段 单元 ...

  7. 60个DevOps开源工具,你在用哪些?

    你喜欢免费的东西吗?获得开发者社区支持的自动化,开源的工具是大家梦寐以求的.这里列举了 60 多款最棒的开源工具,可以帮助你很好的实行 DevOps. 一.开发工具 版本控制&协作开发 1.版 ...

  8. springBoot2.0 配置@ControllerAdvice 捕获异常统一处理

    一.前言 基于上一篇 springBoot2.0 配置shiro实现权限管理 这一篇配置 异常统一处理 二.新建文件夹:common,param 三.返回结果集对象 1.ResultData.java ...

  9. Exadata Smart Flash Logging工作原理

    Exadata在V2时代,ORACLE为了进一步拓宽客户人群,除了宣称Exadata适用OLAP系统,同时也适用于OLTP系统,那怎么才能满足OLTP系统的高IOPS要求呢?于是Exadata引入了闪 ...

  10. bootstrap table 学习记录

    效果: html代码: <!-- 工具容器 --> <div id="toolbar" class="btn-group"> <b ...