Question

我正在尝试让我的博客在Android浏览器上可读，但它总是需要水平滚动。现在，我的解决方案是使用chrome，这样当我将窗口调整到小于文章内容的宽度时，文章将在没有水平滚动条的情况下缩小。您可以看到博客文章here的示例。

如果我这样做：

<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。无论如何要解决这个问题？

Answer 1

我偶尔会遇到同样的问题，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>

小心实际的＃34;＃container＆＃34; DIV。虽然它可能会在屏幕外显示，但我无法修复对象标签（Flash视频播放器）的错误。过流是移动的痛苦。如果可能的话，我会发展流体并从那里开始。在这种情况下，不需要设置最大宽度 - 它将允许用户根据需要浏览网站。

Android浏览器不尊重溢出：隐藏最大宽度

1 个答案: