0

我试图让我的博客在安卓浏览器上可读，但它总是需要水平滚动。现在，我的解决方案是在 chrome 中工作，因此当我将窗口大小调整为小于文章内容的宽度时，文章将随之缩小，而没有水平滚动条。您可以在此处查看博客文章的示例。

如果我这样做：

<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>

然后它就像这里看到的那样工作，但是我页面中的其他东西把事情搞砸了。在 chrome 中，我得到了我想要的效果，但是当我在 android 浏览器上打开页面时，我必须水平滚动。

编辑：我将其追溯到 facebook iframe。无论如何要解决这个问题？

4

1 回答 1

3

我偶尔会遇到同样的问题，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”div 中的内容。虽然它可能会显示在屏幕外，但我永远无法修复对象标签（flash 视频播放器）的错误。溢出是移动设备的痛点。如果可能的话，我会开发液体并从那里开始。在这种情况下不需要设置最大宽度——它将允许用户根据需要浏览网站。

于 2012-07-16T22:02:01.613 回答