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浏览器不尊重溢出：隐藏最大宽度

回答

相关问题