移动端页面内嵌了个 iframe，在 ios 下打开却发现页面怪异。比如 demo。代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<style>
html {
    height: 100%;
    width: 100%;
}
</style>
</head>

<body style="height: 100%; margin: 0; padding: 0; overflow-y: hidden;">
    <iframe style="width:100%; height: 880px;" frameborder="0" src="http://m.hao123.com"> </iframe>
</body>
</html>

Android 下展现良好，但是在 ios 下：

调试一看，iframe 无故变大了，正常情况下应该和 screen 的宽保持一致（比如 360px），在 ios 下的宽度变成了 1440px（iPhone6） 或者 720px（iPhone4）。（感谢 double Net 提供的图片，不禁感概 mac 大法好啊）

最后定位到使得 iframe 变大的原因是，页面中元素即使已经 hidden 或者 display 为 none 了，在计算 iframe 大小时并不会忽略它们，当然前提是在 ios 下，算不算是 ios 的一个 bug 呢？

比如 hao123 中有个图片的轮播效果，iframe 会觉得当前页面太窄无法容纳这么宽的内容，而自动加宽了。


解决这样的问题也很简单，尽量不出现 "溢出" 页面的元素，但是做起来却相当复杂，要考虑很多情况，如果 iframe 很重要的话，可以考虑定制页面。

iframe在ios下无故扩大的问题探究的更多相关文章

  1. 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题

    IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...

  2. ios下微信标题修改

    很多开发过微信的人估计都遇到过这样的问题,ios下微信页面标题更改不了,而安卓却可以直接用:document.title="你的标题". 下面是解决这个问题的hack: 1.jqu ...

  3. iOS下JS与OC互相调用（六）--WKWebView + WebViewJavascriptBridge

    上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...

  4. iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  5. iOS下JS与OC互相调用（一）--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...

  6. iOS下JS与原生OC互相调用(总结)

    这是去年总结的一篇文章,也一并先放到这个目录下好了. iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇 方 ...

  7. vue router 修改title（IOS 下动态改变title失效）

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

  8. iOS下原生与JS交互(总结)

    iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一 第一种方式是用JS ...

  9. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

随机推荐

  1. MySql技巧个人笔记

    1.数据null时sum的用法 mysql数据库SUM(A+B)不一定等于SUM(A)+SUM(B),当A或B为NULL时,SUM(A+B)=NULL. 2.or改为in 同一字段,将or改写为in( ...

  2. Linux磁盘管理之设备文件详解04

    Linux一切接文件,除了普通文件和目录文件,还包括一些其它的特殊文件:块设备文件.字符设备文件.套接字文件.链接文件等.今天这里主要说一下常见的块设备文件和字符设备文件,这2类是最常见的设备文件类. ...

  3. 七、Android学习第六天——SQLite与文件下载（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 七.Android学习第六天——SQLite与文件下载 SQLite SQ ...

  4. 初涉Linux ----------> 打造自己的 Vim IDE

    一.  开篇前言 (图片显示越界的话,请刷新) 装好Ubuntu15.04系统之后呢,玩了玩 Ubuntu,感觉还是很不错的.比windows快,一开机就可以打开你想要的程序,但是在windows下你 ...

  5. memcached在windows下多实例并存

    文章来源:http://blog.csdn.net/xingxing513234072/article/details/39343999 memcached.exe的-d install命令安装时其他 ...

  6. android apk 防止反编译技术第四篇-对抗JD-GUI

    又到周末一个人侘在家里无事可干,这就是程序员的悲哀啊.好了我们利用周末的时间继续介绍android apk防止反编译技术的另一种方法.前三篇我们讲了加壳技术(http://my.oschina.net ...

  7. TFS - 使用微软测试管理器实现跨团队项目的测试用例管理

    在团队项目之间实现测试用例和测试计划的共享,是很多客户关注的问题.尤其在开发产品+服务的团队中,对测试用例的共享要求比较高.下面就如何在Team Foundation Server中如何实现团队项目之 ...

  8. IBM云的商业动作之我见（1）：IBM 收购 OpenStack 托管私有云公司 Blue Box [IBM Acquired Blue Box]

    2015-06-10 IBM 刚刚(2015/06/03)宣布收购 Blue Box 公司.本文就聊聊这点事. 1. Blue Box 是做什么的?它是一家中小型托管私有云提供商. 1.1 公司的简单 ...

  9. 突然发现这周有点忙。。着玩-PHP进阶

    hi 周二才,不过我突然意识到这周有点忙着玩的感觉,还是很期待的——今天下午去市里,晚上回来看电影,明晚聚餐吃火锅,后天下午拍短片,晚上可能要打球,周五,嗯,就到周五了.虽然这样下去连怎么写(bian ...

  10. 【2016-10-13】【坚持学习】【Day4】【virtual 虚函数】

    定义一个基类,有一个虚函数 定义三个子类,分别继承,重写,New,这个虚函数   abstract class Test { public virtual void Prinf() { Console ...