Android瀏覽器不尊重溢出：隱藏最大寬度

我試圖讓我的博客在android瀏覽器上可讀，但它總是需要水平滾動。目前，我的解決方案是使用chrome，因此當我調整窗口的寬度使其小於文章內容的寬度時，文章會縮小，並且沒有水平滾動條。您可以看到博客文章here的示例。Android瀏覽器不尊重溢出：隱藏最大寬度

如果我這樣做：

<head> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=2.0; minimum-scale=1.0; user-scalable=yes;" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 

    <style type="text/css"> 
     body { 
     overflow: hidden; 
     margin: 0; 
     } 

     #container { 
     max-width: 650px; 
     margin: auto; 
     } 
    </style> 
</head> 
<body> 
    <div id="container">Content goes here.</div> 
</body>

那麼它的工作原理如圖here，但在我的網頁別的東西是搞亂的東西了。在Chrome中，我得到了我想要的效果，但是當我在Android瀏覽器上打開頁面時，我必須水平滾動。

編輯：我將其追溯到facebook iframe。無論如何要解決這個問題？

來源

2012-07-16 Conner

我偶爾會遇到同樣的問題，android完全忽略溢出命令。我認爲第一個問題是使用隱藏在身體上的溢出，而不是內部元素。

我會改變：

<style type="text/css"> 
    body { 
    overflow: hidden; 
    margin: 0; 
    } 

    #container { 
    max-width: 650px; 
    margin: auto; 
    } 
</style>

要這樣：

<style type="text/css"> 
    body { 
    margin: 0; 
    } 

    #container { 
    overflow: hidden; 
    max-width: 650px; 
    margin: auto; 
    } 
</style>

注意什麼進入實際的「#container的」分區。雖然它可能會在屏幕外顯示，但我永遠無法修復對象標籤（Flash視頻播放器）的錯誤。流量過大是移動設備的一大難題。如果可能的話，我會開發流體並從那裏出發。在這種情況下，沒有必要設置最大寬度 - 它將允許用戶按照自己的需要瀏覽網站。

來源

2012-07-16 22:02:01 CrazyVipa

我上面發佈的代碼實際上正在工作。在Android瀏覽器中查看其下方的引用鏈接。在我的網站上還有其他一些東西正在搞亂（也許，正如你所說，容器內部的東西像iframes）。 – Conner 2012-07-16 22:16:04

這個答案幫助我理解了問題的根源，謝謝。 – Shadow 2012-11-30 10:34:21

這也幫助了我。看來你不能在''上設置'overflow：hidden;'。 – Haroldo 2013-01-31 10:03:15

Android瀏覽器不尊重溢出：隱藏最大寬度

回答

相關問題