iframe在IOS里如何自适应宽度？

最新推荐文章于 2020-10-14 15:00:55 发布

原创最新推荐文章于 2020-10-14 15:00:55 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了解决iOS设备上iframe自动变宽并出现滚动条的问题。通过设置iframe的scrolling属性为no来隐藏滚动条，并使用特定的CSS样式确保iframe在不同屏幕尺寸上的适配。

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;
}

完成~~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kakaxiD

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

iframe 高度自适应 手机端适用

fiax23的专栏

05-16

1万+

从优酷上复制的通用代码必须要填写高度跟宽度，想自适应的话就改为 width=100% height=100% 然后发现这样宽度是可以了但是高度不行，然后去找度娘， js jq，或者改成，试了半天没效果，然后想到一个折中的办法。在css中设置该iframe的一个最小高度 min-height:400px 电脑端看上去稍微小了些，但还是在接受范围内，手机端也在接受范围内。保温被 ht

iframe自适应高度和宽度

12-08

iframe自适应高度和宽度

参与评论您还未登录，请先登录后发表或查看评论

iframe自适应宽高

11-08

这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括：高度和宽度大小的iframe内容大小。作品以多个嵌套的iframe。跨域iframe域认证。提供了一系列的页面大小的计算方法来支持复杂的CSS布局。检测修改DOM可以使网页大小使用MutationObserver。发现可以导致页面大小调整事件（窗口大小调整，CSS动画和过渡，改变方向和鼠标事件）。简化通讯和主机之间通过PostMessage iframe的网页。在iframe页面链接修复和支持iFrame与父页面之间的链接。提供自定义的大小和滚动方法。使家长地位和视口大小的iframe。与ViewerJS支持PDF和ODF文档。后备支持到IE8。

iframe自适应

Df's blog

03-17

765

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-

iframe自适应宽度

Zeze

01-22

<iframe id="course_content" style="width:100%;margin:5px 0 0;" scrolling="no" src="<?php ?>" ></iframe> <script> $("#course_content").load(function() { ...

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

08-25

此外，如果我们想让 iframe 在 iOS 设备上自适应宽度，可以使用以下方法： 1. 定义 iframe 中的 scrolling 属性为 no，设置 iframe 中不显示滚动条。<iframe scrolling="no" ></iframe> 2. 设置 iframe 的样式为：...

ios中wkwebview页面自适应

08-20

- 注入CSS样式确保图片等元素自适应宽度 - 通过JavaScript获取内容高度并动态调整WebView高度[^2][^4] §§相关问题§§ 1. 在WKWebView中如何实现视频的自适应？ 2. 除了高度，如何实现WKWebView宽度的自适应？ 3....

ios iframe 无法滚动

06-19

例如，有开发者指出：在iOS上，iframe需要被包裹在一个设置了`-webkit-overflow-scrolling:touch`的div中，并且该div需要设置overflow为auto或scroll。[^1]但是，请注意，上述引用[1][2][3]与问题无关，我们主要依据...

ios iframe页面缩小了

06-06

如果您的 iOS 设备上的 iframe 页面缩小了，可能是因为该页面的 viewport 设置不正确。您可以尝试在页面的 head 标签中添加以下 meta 标签来设置 viewport： ``` , initial-scale=1.0"> ``` 这将使页面自适应设备...

现在已知iframe嵌套的页面大小远大于iframe父组件容器大小如何让iframe嵌套页面可以在父组件容器中等比例缩小

热门推荐

m0_38082271的博客

02-01

1万+

最近在项目中用到了iframe，写出来做个记录，能帮到大家最好。一.首先简单介绍一下iframe iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。所有浏览器都支持 <iframe> 标签。二.页面引用<iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" widt...

让嵌入的iframe完美自适应宽度、高度

ITSM/ITIL/网络安全/IT运维

10-14

9657

涉及到系统集成的时候，前端我们经常会用到iframe嵌入，但是嵌入的时候经常有不适应的情况，太长或太宽、滚动条。。。下面的方法可以做到使嵌入的iframe自适应宽度、高度， 1、嵌入iframe，加入onload事件 <iframe id="bi_iframe" src="http://xx.xx.xx.xx/yourServicePath&para1=xxx" onload="adjustIframe();" frameborder="0" scrol...

iframe 自适应

牛肉胡辣汤

10-09

5667

function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.

iframe自动适应大小

weixin_30548917的博客

08-02

161

Code<scripttype="text/javascript">functionSetWinHeight(obj){varwin=obj;if(document.getElementById){if(win&&!window.opera)...

IOS中iframe的宽度自动扩大问题

Stiven_Lu的博客

09-05

4956

最近工作中遇到将之前网页以iframe的形式插入到现有网页中业务需要，完成后在chrome浏览器上测试时并没有出现问题，然后交给测试同学时，出现问题了，iframe自动变宽了，在IOS手机上出现滚动条。解决步骤如下，亲测有效。第一步：定义 iframe 中的scrolling属性为no，设置iframe中不显示滚动条。 <iframe scrolling="n...