相关疑难解决方法(0)
使iframe响应
我正在阅读这篇标题为"你能让iFrame响应吗？"的stackoverflow帖子,其中一条评论/答案引领我走向这个jfiddle.
但是当我尝试实现HTML和CSS以满足我的需求时,我没有相同的结果/成功.我创建了自己的JS小提琴,所以我可以告诉你它对我来说不起作用.我确定它与我正在使用的iFrame类型有关(例如,产品图像可能需要响应或其他什么？)
我主要担心的是,当我的博客读者在他们的iPhone上访问我的博客时,我不希望一切都在x宽度(我的所有内容都是100%),然后iFrame行为不端,是唯一更广泛的元素(因此坚持超出所有其他内容 - 如果这是有道理的??)
无论如何,有谁知道为什么它不起作用？谢谢.
这是MY JSFIDDLE的HTML和CSS(如果你不想点击链接):
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
frameborder="0" allowfullscreen></iframe>
</div>
</div>
这是附带的CSS:
.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}
.h_iframe {
position: relative;
}
.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}
.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: …推荐指数
解决办法
查看次数
如何在移动野生动物园中正确显示iFrame
我正在尝试在我的移动网络应用程序中显示iframe,但是我无法将iframe的大小限制为iPhone屏幕的尺寸.iframe元素的高度和宽度属性似乎没有任何影响,奇怪的是.用div围绕它会设法限制它,但是我无法在iframe中滚动.
之前有没有人在移动游猎中解决过iframe？任何想法从哪里开始？
推荐指数
解决办法
查看次数
在iOS上使用CSS的iframe大小
有一个iframe,它基本上有更多的内容而不适合框架.框架的大小基于浏览器屏幕大小,并允许溢出滚动,在除iOS之外的所有浏览器上都能完美运行.在iOS上,safari决定调整框架大小以适应内容.不是你所期望的.
关于jsFiddle的示例代码:http:
//jsfiddle.net/R3PKB/2/
在您的iOS设备上试用:http:
//jsfiddle.net/R3PKB/2/embedded/result
HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
推荐指数
解决办法
查看次数
媒体查询无法在iframe中运行
我有一个响应的网页.它利用媒体查询.
但是在iframe中加载的同一页面无效.
例如,考虑到我的网页,当屏幕宽度小于640px时,我将背景颜色设置为红色.
@media only screen and (max-device-width : 640px) {
.header-text {
background-color: red;
}
}
因此,当我在新选项卡中加载该窗口并使浏览器宽度小于640px时,背景颜色变为红色.
但是在320*480维度的iframe中加载时,同一窗口没有背景颜色为红色.
如何使媒体查询在iframe中工作？
推荐指数
解决办法
查看次数
iOS上的IFrame高度问题(手机游戏)
示例页面源:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
问题是,height中200px距离的IFrame内联样式是在移动Safari忽略:
另外,我想通过vanilla JavaScript动态更改IFrame的高度,而这些JavaScript根本无法使用以下代码:
document.getElementsByTagName('iframe')[0].style.height = "100px"
height根据开发工具正确更改样式的值,但它被忽略,因为IFrame的实际渲染高度不会改变.
这似乎只是移动Safari中的一个问题,并且在最新版本的桌面Safari,Firefox,Chrome,Androids WebView等上正常运行.
测试页:http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.:我在browserstack上使用各种设备对此进行了测试,并且还在那里截取了屏幕截图,因为我手头没有实际的iDevice.
推荐指数
解决办法
查看次数
如何在iPhone纵向视图中获取iframe宽度100%
基本上我和这里有同样的问题,但因为他从来没有得到一个好的答案,我正在重新提出这个问题.
所以问题是只有在iPhone Safari中width="100%",纵向视图似乎行为不端并且给IFrame提供了横向宽度.我似乎无法弄清楚这里发生了什么.
我正在使用正确的视口:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
并且IFrame中的网站实际上可以比320px更窄,并且还具有相同的视口定义.(我读过一个类似的问题,这可能是一个因素所以我只是澄清).
在调试器中我可以看到,在添加URL之前,iFrame的offsetWidth是304px,这是正确的,加载后它是588px,这对于横向视图是正确的.但为什么它改变了我不知道.IFrame中的页面来自不同的域,因此不能影响它,主页面不会对iframe的宽度做任何事情.
我使用的iPhone是iPhone 5 iOS 7.0.2
PS.请不要发布任何JS答案,你在窗口调整大小手动调整iframe大小,我目前正在寻找一个非JS修复,这是我打算使用的最后一个选项.另外请不要发布@media CSS的答案你min-width在iPhone的纵向视图宽度上设置为320px,这对我来说因各种原因不起作用.
推荐指数
解决办法
查看次数
当使用iPhone或iOS设备在`iframe`中查看时,为什么`position:fixed`不起作用？
我已经研究过stackoverflow,似乎position:fixed在iOS移动设备的iframe过去一直是一个问题但尚未得到答案.
这是我通过jsbin创建的一个例子:http://jsbin.com/pekeca/1/
在该示例中,存在使用iframe的父HTML页面,该iframe包含另一个HTML页面(子).以下是需要注意的事项:
- 在任何设备上查看父HTML时,子HTML中的导航栏保持固定.这是预期的行为.
- 但是,无论浏览器如何在iPhone上查看父HTML,子HTML中的导航栏都会丢失其固定位置. 这是一个仅在iPhone中发生的错误.
- 当在iPhone中直接查看子HTML页面(即,不在iframe内)时,导航栏保持在固定位置并且工作正常.
有没有人想出position:fixediPhone或iOS设备的解决方法？
推荐指数
解决办法
查看次数
iFrame比iPhone 6上的整个屏幕更宽
真的可以使用这个的帮助.
我正在尝试在我的网站中打开一个覆盖整个屏幕的iFrame.不幸的是,在iPhone 6及更高版本中,其宽度实际上更大.我们在iframe旁边有一个广泛的div.当我删除它一切都没关系.标记和样式非常简单:
<div id="someDiv" style="width: 1000px"></div>
<iframe id="ourIframe" style="position: fixed; width: 100%; height: 100%"></iframe>
Android工作正常.
我找不到这个问题的在线资源.
请帮忙.提前致谢.
推荐指数
解决办法
查看次数
Javascript触摸事件在Mobile Safari中无效
我试图限制用户在iframe上触摸时滚动.所以,如果他们触摸身体,他们可以滚动.
想知道为什么下面的代码在移动Chrome中运行良好,但在Mobile Safari中无效.有什么方法可以解决这个问题吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.overflowHidden {
position:relative;
overflow-y:hidden;
}
.overflowAuto {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
</style>
</head>
<body>
<section>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
<iframe id="appSimulator" style="background: #000000;" width="189px" height="400px" frameborder="0" scrolling="no"></iframe>
<p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
</section>
<script type="text/javascript">
document.body.addEventListener('touchstart', function(){
document.body.style.overflow="auto";
$('body').removeClass('overflowHidden');
$('body').addClass('overflowAuto');
}, false)
document.body.addEventListener('touchend', function(){
document.body.style.overflow="hidden";
$('body').removeClass('overflowAuto');
$('body').addClass('overflowHidden');
}, false)
</script>
</body>
</html>
编辑
移动Chrome的示例 - 这就是我想要的Safari移动版
谢谢.
编辑2
感谢muecas的帮助.
以下是Safari Mobile的当前结果
现行守则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> …推荐指数
解决办法
查看次数
在移动设备上响应,表格不在iframe中
我有一个问题,我的网站在实际的移动设备上查看,但当我在我的计算机上调整屏幕大小时,它看起来很好.这也在iframe中,并且在移动设备上的iframe之外看起来很好.下面是实际的URL,点击搜索播放器,您将看到该页面.
http://adidasuprising.com/adidas-grassroots-mens-events/adidas-gauntlet-series/dallas/
UPDATE
看起来像其他人有这个问题.(响应)表格宽度不适合ios safari中iframe内的容器
桌面调整大小
iPhone上的谷歌浏览器
推荐指数
解决办法
查看次数
标签 统计
css ×8
iframe ×8
ios ×4
iphone ×3
html ×2
javascript ×2
mobile ×2
css-position ×1
css-tables ×1
overflow ×1
resize ×1