我正在开发一个小部件,可以作为iframe嵌入到页面中(iframe将通过
javascript注入和设置样式). iframe应放在右下角.我只能控制iframe的样式.
我创建了以下演示页面,演示了测试主页中的问题：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8"/>
<title>Hello world!</title>
<Meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
在桌面浏览器上,此代码可以正常工作,但在(某些)移动设备上,iframe在屏幕上不可见.如果我试图突出显示放置在灰色区域的元素.
为什么会发生这种情况,如何设置iframe样式以便放置在右下角？
编辑：这是来自Galaxy S3仿真(Chrome)的屏幕截图. iframe在灰色区域是不可见的.我认为它在物理Nexus 5X设备上是一样的.
非常感谢！
解决方法
给#greeting提供了1000px的宽度,这就是移动宽度之外的元素,你可以像使用媒体查询一样修复这个问题. 992宽度开始设备的纵向视图
@media (max-width:992px){
#greeting { width:100% !important; }
}
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8"/>
<title>Hello world!</title>
<Meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
