在手機上查看時多餘的空白

-4

當我的網站在移動瀏覽器上查看時，網站實際內容的右下角有很多白色房間。我試過在我的<body>上放置overflow-x: hidden來關閉水平滾動，但即使這樣也行不通。據我所知，我也沒有超出屏幕邊界的元素。我的網站可以找到here。在手機上查看時多餘的空白

來源

2016-11-06 Isaac Wasserman

更多關於您的問題的細節將在提供的答案有幫助。 – JohnH

-1

我不能用手機邊瀏覽器重現此錯誤，但也許這meta標籤可以幫助：

<meta name="viewport" content="width=device-width">

來源

2016-11-06 15:13:08 Avothr

他的網站已經有了這個標籤。好的建議，但。 –

它是由

<img class="bkgimage" src="colorfulbackground.jpg">

引起了桌面版本，你設置一些css像width:100%;使圖像適合div，但在移動版本中，此css被替換爲opacity: 0;。所以你的圖像停止縮放到頁面寬度和opacity: 0不會消失從渲染圖像，只呈現爲完全透明。您應該使用display: none;，並將display: block;移至桌面CSS，因爲它會覆蓋手機CSS。 ID（＃）的選擇器比沒有它們的選擇器更重要。

Does opacity:0 have exactly the same effect as visibility:hidden

https://css-tricks.com/specifics-on-css-specificity/

來源

2016-11-06 15:38:22 Sylwekqaz

在手機上查看時多餘的空白

回答

相關問題