Question

我正在开发一个小部件，可以作为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设备上也是如此。

非常感谢！

Answer 1

1000px宽度已经提供给#greeting，这就是为什么元素超出您的移动宽度，您可以像使用媒体查询一样修复此问题。 992 width启动设备的纵向视图

＆＃13;

@media (max-width:992px){
 #greeting { width:100% !important; }  
}

＆＃13;

<!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>

＆＃13;

Answer 2

根据我的调查，Chrome模拟器中显示的灰色区域是由段落html标记的样式引起的：

`<p id="greeting" style="width:1000px">Loading...</p>`

我相信灰色区域会显示，因为您的样式为width:1000px，其中模拟器的总大小（例如 Galaxy S3 ）的最大宽度仅为360px。但是，如果删除段落元素中的width: 1000px样式，则可以看到框架正确显示在屏幕的右下角。

您可以使用以下示例进行检查：

<!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: 100px">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>

Answer 3

我没有试过这个，但是如果 - 而不是将位置设置为“底部：5％; right：5％ - 根据视口宽度和视口高度计算左上角的位置。类似的东西：

top: calc(100vh - 200px);
left: calc(100vw - 200px);

Answer 4

参见 THIS DEMO IN YOUR MOBILE

更改： -

添加以下样式以处理移动浏览器

<强>原因： -

移动设备呈现移动兼容模式的html，它为更高宽度的元素注入自己的风格。这就是为什么页面在移动兼容模式下以非预期的方式工作的原因。如果你在你的html中处理它，那么它会使你的页面样式保持你想要查看的方式。

这就是为什么如果你在chrome设置中点击Request desktop site，你的代码本身就可以正常运行

/* mobile phone */ @media all and (max-width: 768px) { #greeting { width:100% !important; } }

＆＃13;
＆＃13;
<html> <head> <meta charset="UTF-8"/> <title>Hello world!</title> <meta name="viewport" content="width=device-width"/> <style> /* mobile phone */ @media all and (max-width: 768px) { #greeting { width:100% !important; } } </style> </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: tranparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe> </body> </html>
＆＃13;
＆＃13;
＆＃13;

固定元素移出屏幕

4 个答案: