1. 首頁
  2. 問答
  3. 移動屏幕上的固定元素

移動屏幕上的固定元素

2016-11-25 157 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

嵌入你的小部件關於'