1. 首页
  2. 问答
  3. 移动屏幕上的固定元素

移动屏幕上的固定元素

2016-11-25 124 views
8

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

enter image description here

非常感谢！

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

相信的灰色区域显示出来，因为你的风格：从我的调查，灰色区域，显示了在铬模拟器是由一段HTML标签的样式引起的基于

来源

2016-11-25 rrejc

+0

？我也想检查一下 – prtdomingo

+0

@PhilipDomingo：我已经更新了上面的问题。 – rrejc

+0

嵌入你的小部件关于'