2016-11-06 50 views
-4

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

+0

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

回答

-1

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

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

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

0

它是由

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

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

一些相關鏈接

Within CSS what is the difference between opacity:0 and display:none?

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

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