固定元素在移动设备上的屏幕外答案

【问题标题】：Fixed element out of screen on mobile固定元素在移动设备上的屏幕外
【发布时间】：2016-12-04 12:25:29
【问题描述】：

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

非常感谢！

【问题讨论】：

您能否提供移动设备的名称，其中 iframe 不可见？我也想检查一下
@PhilipDomingo：我已经更新了上面的问题。
如何将关于<iFrame> 的小部件嵌入到所有者页面中？

标签： html css mobile

【解决方案1】：

1000px 宽度已被赋予 #greeting ，这就是为什么元素超出您的移动宽度，您可以像使用媒体查询一样简单地解决这个问题。 992 width 开启设备纵向视图

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

【讨论】：

正如我已经说过的，我只开发小部件（一个 iframe），所以我没有访问权限或无法修改父页面。看起来这个特定的页面有点“奇怪”——它有用于响应式设计的视口标签，但它不是响应式的（固定宽度）。正如我调查的那样，如果不更改父页面的布局/css（我不能）就不可能解决我的问题，所以页面的所有者必须解决这个问题（如果它想要拥有我们的小部件）。我会接受这个答案，即使它不能解决我的问题，但我会知道如何支持这类问题。

【解决方案2】：

根据我的调查，chrome模拟器中出现的灰色区域是由段落html标签的样式引起的：

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

我相信灰色区域会出现，因为您有一个样式为width:1000px，其中模拟器的总大小（例如，Galaxy S3）的最大宽度仅为 360 像素。但是，如果您删除段落元素中的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>

【讨论】：

嗨，谢谢，但这对我帮助不大。当我准备这个例子时，我也注意到了这一点。问题是（正如我已经说过的），我不能更改主页，因为我不是页面的所有者 -> 我只是在开发一个小部件，它将通过 iframe（和 JS）嵌入到页面中.
我还尝试了另一件事。在这个示例页面上，我删除了我的 iframe 并嵌入了同样使用固定定位的 zopim（在线聊天）小部件。而且它也不起作用（它隐藏在灰色区域中）。如果我删除段落上的元（视口）标签或宽度，则它是可见的。似乎这种组合正在引起问题 -> 另一方面，响应式设计和固定宽度显然不是要走的路。所以问题是：是否有可能在不修改所有者页面的情况下克服这个问题？
有趣！元标记与段落宽度相结合似乎使正文缩放。但是固定元素仍然固定在整个窗口中。所以它的位置在身体外面。

【解决方案3】：

我没有尝试过，但是如果 -- 而不是将位置设置为 `bottom: 5%; right: 5% -- 你根据视口宽度和视口高度计算左上角的位置。比如：

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

【讨论】：

【解决方案4】：

见THIS DEMO IN YOUR MOBILE

更改：-

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

原因：-

移动设备以移动兼容模式呈现 html，该模式将自己的样式注入到更高宽度的元素中。这就是页面在移动兼容模式下以意想不到的方式工作的原因。如果您在自己的 html 中处理它，那么它会按照您的预期查看页面的样式。

这就是为什么如果您在 chrome 设置中单击 Request desktop site，您的代码本身就可以正常工作

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

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

【讨论】：