脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → ios设备iframe宽度超出屏幕

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

 更新时间：2019年07月16日 08:33:08   作者：modoDan  
这篇文章主要给大家介绍了关于ios设备使用iframe宽度超出屏幕的解决方法，文中通过示例代码介绍的非常详细，对各位ios开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

场景

在做公司官网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;
}

总结

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

您可能感兴趣的文章:

相关文章

  • iOS安全防护系列之重签名防护与sysctl反调试详解

    iOS安全防护系列之重签名防护与sysctl反调试详解

    这篇文章主要给大家介绍了关于iOS安全防护系列之重签名防护与sysctl反调试的相关资料，文中通过示例代码以及图文介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • 老生常谈iOS应用程序生命周期

    老生常谈iOS应用程序生命周期

    下面小编就为大家带来一篇老生常谈iOS应用程序生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • iOS给密码进行加密的方法

    iOS给密码进行加密的方法

    这篇文章主要介绍了iOS给密码进行加密的方法,需要的朋友可以参考下
    2017-06-06
  • 详解使用Xcode7的Instruments检测解决iOS内存泄露(最新)

    详解使用Xcode7的Instruments检测解决iOS内存泄露(最新)

    本篇文章主要介绍使用Xcode7的Instruments检测解决iOS内存泄露(最新)的相关资料,需要的朋友可以参考下
    2017-09-09
  • iOS开发之手动布局子视图

    iOS开发之手动布局子视图

    这篇文章主要介绍了iOS开发之手动布局子视图，从入门到精通帮助大家更好的开发iOS项目，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • iOS中最全的各种定时器使用教程

    iOS中最全的各种定时器使用教程

    这篇文章主要给大家介绍了关于iOS中最全的各种定时器的使用教程，文中通过示例代码介绍的非常详细，通过文中介绍的最全的定时器相信会对各位iOS开发者们带来一定的帮助，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • IOS中的七种手势小结

    IOS中的七种手势小结

    本文给大家总结了ios中的七种手势，手势在开发在开发中经常会用到，今天小编通过本文给大家详细介绍下，需要的朋友参考下
    2016-11-11
  • IOS 时间和时间戳之间转化示例

    IOS 时间和时间戳之间转化示例

    我们经常从服务器后台拿到时间戳的时间,以下代码可以实现将时间戳转为可读的时间格式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • Objective-C 入门篇(推荐)

    Objective-C 入门篇(推荐)

    由C语言和Smalltalk扩展出来的，是C语言的超集，最大的区别是OC是面向对象的，其火星文写法对于之前从事Java开发的同学颇感蛋疼，OC最大特点之一是使用消息结构而不是函数调用
    2021-11-11
  • iOS11带来的技术变化及注意事项

    iOS11带来的技术变化及注意事项

    这篇文章给大家介绍了ios11带来了技术变化及注意事项，在相册权限上有很大变化，具体内容详情大家参考下本文
    2017-09-09

最新评论