ios中iframe宽度超100%的诡异bug

最新推荐文章于 2024-05-20 00:08:16 发布
最新推荐文章于 2024-05-20 00:08:16 发布
阅读量1.5k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40863414/article/details/82732092
版权

在ios上使用iframe的时候，如果iframe的真实宽度大于外层提供的宽度，就会出现bug,如果你也遇到类似的问题，可以看看；
文章地址
ios中iframe宽度超100%的诡异bug

在这里插入图片描述

秋天爱美丽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ios设备使用iframe宽度超出屏幕的解决方法
08-25
主要给大家介绍了关于ios设备使用iframe宽度超出屏幕的解决方法，文中通过示例代码介绍的非常详细，对各位ios开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
ios触摸超出_ios设备使用iframe宽度超出屏幕的解决方法
weixin_39859819的博客
12-19 208
场景在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题，感觉像是被截断一样，但是在其他手机上显示正常。分析问题原因：页面a利用iframe嵌入了b，同时设置iframe的宽度为100% ，但是页面b的实际宽度要大于外层设置的100%。正常情况下，页面b的显示宽度应该为外层赋予的100%，但是在ios上，当iframe内真实宽度大于外层给予的宽度的时候，显示的宽度则为真实宽度。解...
ios中https网站不允许iframe内嵌http网页链接
最新发布
大雾起了清晨
05-20 323
从iOS 10版本开始，iOS Safari对于iframe内嵌http网页链接的访问进行了限制，阻止了http网页在https网站中进行iframe内嵌。这是出于安全考虑，以防止不安全的http网页可能导致安全漏洞或信息泄露。因此，如果想在iOS中实现iframe内嵌，建议保证被嵌入的页面都是https的。
html iframe宽度100%
LYBWWP
06-19 984
<iframe src="" onload="this.width=screen.width;this.height=screen.height;">
iframe轻微滚动及无法滚动和100%宽度超出屏幕
neabea2016的博客
09-17 1993
1.使用iframe页面会有轻微上下滚动 .iframe-style{ height: 100%; width: 100%; border: none; margin: 0; vertical-align: top;/*解决轻微滚动*/ } 2.iframe适配安卓移动端，有时无法上下滚动 解决：无法滚动的html div增加overflow...
ios下iframe页面内容宽度超出屏幕宽度
趙小二啊
09-04 433
iframe，ios下iframe页面内容宽度超出屏幕宽度 安卓，pc上面测试正常，ios异常 解决方案： <div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;"> <iframe src="https://mp.csdn.net/postedi...
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
01-20
标题所提及的“ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)”主要针对的是iOS系统中`iframe`高度计算和弹框定位的问题。在iOS中，当`iframe`内的子页面高度超过父页面时，若子页面触发弹框，弹框可能会出现在...
iOS 中根据屏幕宽度自适应分布按钮的实例代码
09-01
在iOS开发中，有时我们需要创建一组按钮，这些按钮需要根据屏幕宽度自适应地分布，以确保在不同尺寸的设备上都能美观地展示。本篇内容将详细介绍如何在iOS中实现这个功能，通过两种不同的方法来展示自适应宽度的按钮...
IOS上iframe的滚动条失效的解决办法
01-05
倘若iframe的内容足够长超出了iframe设定的高度时，在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。  问题重现： 结构：  ...
iphone上使用iframe时页面宽度变大的解决方法
E_li_na的博客
10-21 1196
场景是这样的，业务需要展示协议，我们公司所有产品的多个地方都有展示协议的需要，于是，我们就封装了一个组件，一个iframe里读取从后管获取的协议页面。 起初，协议页面没有设置上下左右边距，ios的页面和安卓的页面还是没有什么区别的。后来业务提了新需求，美化了一下页面，在协议页面上下左右加了边距，于是就出现了ios整体页面宽度大于屏幕宽度的bug，页面出现横向滚动条，协议内容部分被遮盖，需要用户手动拉一下滚动条才能看全协议内容。 网上查了ios使用iframe时有个bug:页面宽度会扩大，超出一个屏幕的宽度。
iframe在iphone中内容宽度撑开屏幕的解决！！！
weixin_33860528的博客
07-19 1025
2019独角兽企业重金招聘Python工程师标准>>> ...
[经验] 解决iframe标签100%宽高时出现滚动条问题
KyaruChan的博客
02-28 2628
iframe标签满宽高时的滚动条问题
实现iframe的100%高度和宽度
热门推荐
muzizongheng的专栏
12-26 1万+
body {margin: 0; /* Reset default margin */}iframe {display: block; /* iframes are inline by default */background: #000;border: none; /* Reset default border */height: 100vh; /* Viewport-relative un...
IOS中iframe的宽度自动扩大问题
Stiven_Lu的博客
09-05 4829
        最近工作中遇到将之前网页以iframe的形式插入到现有网页中业务需要，完成后在chrome浏览器上测试时并没有出现问题，然后交给测试同学时，出现问题了，iframe自动变宽了，在IOS手机上出现滚动条。解决步骤如下，亲测有效。 第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。   &lt;iframe scrolling="n...
ios端 尝试解决 iframe层无法滚动,及iframe宽度变宽的问题
qq_41074373的博客
06-12 4954
最近在项目中，使用iframe层展示商品详情。于是将网页嵌在了iframe标签里面，在PC测试没有问题，自适应良好，但是转入IOS 真机中，iframe 却不能很好地适应屏幕大小，总是超出屏幕尺寸，也无法上下左右滚动查看完整页面。1、iframe无法滚动：（使用一个div将iframe包含起来，给该div设置一下class）.scroll-wrapper { -webkit-ove...
iframe，ios下iframe页面内容宽度超出屏幕宽度
景色分明
02-18 2661
iframe，ios下iframe页面内容宽度超出屏幕宽度 安卓，pc上面测试正常，ios异常 解决方案： &lt;div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;"&gt; &lt;iframe src="https://engine.tuishark.com/in...
h5开发iframe在ios设备宽度超出屏幕
liuxing393724034的博客
10-29 3203
做h5项目时遇到iframe在ios手机上超出屏幕的问题，在iframe外层套了一个div，div的宽度为屏幕的90%；给iframe设置了宽度100%没有用，在ios手机上为超出屏幕，但是在安卓手机上显示正常。 解决办法： 给iframe的外层div添加样式：overflow: auto;-webkit-overflow-scrolling:touch;width:100%; 给iframe设...
IOS iframe 的高度会根据内容自适应
weixin_42606458的博客
08-10 2683
问题：在iOS上一个页面通过iframe嵌套一个页面，内容页面中一个显示在页面底部的元素显示不出来，这个元素的 position 为 fixed 。 原因：因为 iOS 下的 Safari 的 IFrame 的高度会根据页面的内容自适应造成了 IFrame 的高度过高（即iframe的高度&gt;屏幕的高度）。这个元素的 position 为 fixed显示在了屏幕外面，导致iframe下pos...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值