首页
登录 | 注册

ios设备使用iframe宽度超出屏幕的解决方法

场景

在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常。

分析

问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%。
正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度。

解决

1、给iframe的外层div添加样式:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;

2、给iframe设置属性scrolling='no'

3、给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;

<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;">
 <iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="https://juejin.im/timeline">
 </iframe>
</div>

附:iframe在IOS里如何自适应宽度?

iframe自动变宽了,在IOS手机上出现滚动条

第一步:定义 iframe 中的scrolling属性为no,设置iframe中不显示滚动条。

<iframe scrolling="no" ></iframe>

第二步:设置iframe的样式为如下所示

iframe{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  min-width: 100%;
  *width:100%;
  width:1px;
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对--本站--的支持。

相关内容

相关文章

  • 开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { ...
  • iOS 中根据屏幕宽度自适应分布按钮的实例代码
     下载demo链接:https://github.com/MinLee6/buttonShow.git 屏幕摆放的控件有两种方式,一种根据具体内容变化,一种根据屏幕宽度变化. 下面我分别将两个方式,用代码的方式呈现: 1:根据具体内容变化 ...
  • 检测iOS设备是否越狱的方法
    在应用开发过程中,我们希望知道设备是否越狱,正以什么权限运行程序,好对应采取一些防御和安全提示措施. 首先,你可以尝试使用NSFileManager判断设备是否安装了如下越狱常用工具: /Applications/Cydia.app /Li ...
  • iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可. 代码如下:复制代码 代码如下://公共方法:设置iframe的高度以保证全部显示数据//function SetPageHeight() {//    ...
  • 解释: No boot device available(无引导设备)  系统找不到作为引导设备的软盘或者硬盘. 解决参考:出现该问题,电脑软硬件应用网提醒网友,一般为系统引导设备故障导致,检查硬盘是否故障 
  • 详解使用Xcode进行iOS设备无线调试
    设备环境:Mac OSX 10.12.5.iOS11.Xcode9 PS:这是WWDC2017的新功能,iOS11以上,Xcode9这是刚性要求.这个功能不好找,就记下来了 手机连接上Xcode,打开Xcode菜单:Windows-> ...

2019 xools.net webmaster#xools.net
12 q. 0.022 s.
湘ICP备19005923号