Chrome android 浏览器只显示网页宽度的一部分答案

【问题标题】：Chrome android browser shows only a part of the web page widthChrome android 浏览器只显示网页宽度的一部分
【发布时间】：2013-04-19 08:43:29
【问题描述】：

我有一个三星 Galaxy Note 2，我使用 chrome 浏览器显示一个顶部为 <div> 宽度为 1280 像素的网页。由于 Galaxy Note 2 的屏幕为 1280 像素宽，我希望整个页面一次以全宽显示。

但事实并非如此，而是显示了大约 980px 的内容：我必须取消缩放才能看到整个页面的宽度。而且它变得非常无聊，因为在每一页上，我都必须一次又一次地取消缩放。

我在标题中尝试了类似的东西：

<meta name="viewport" content="width=device-width, initial-scale=1" />

它修改了一些东西，但更糟：看起来我的 1280 像素中只显示了大约 640 像素

编辑，这里有 2 个 html 页面来测试：

--> 当我显示 test.html 时，我只能看到绿色，看不到红色。（我必须取消缩放才能看到两种颜色）

test.html :
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
    <div style="background-color:red; width: 1280px">
    <div style="background-color:green; width: 980px">
    hello world
    <a href="test2.html">Go next page</a>
    </div>
    </div>
    </body>
    </html>

test2.html :
    <html>
    <head>
    </head>
    <body>
    <div style="background-color:blue; width: 1280px">
    <div style="background-color:yellow; width: 980px">
    houston we have a problem
    <a href="test.html">Go prev page</a>
    </div>
    </div>
    </body>
    </html>

我制作了 2 个页面，因为从一个页面切换到另一个页面时，比例不是固定的：即使我在 test.html 上取消缩放以适应屏幕，我也必须再次取消缩放 test2.html

我怎样才能继续为我的所有网页一次获得 1280 像素？

【问题讨论】：

你能给我们展示更多你的代码，也许还有一个 jsfiddle
你想要什么代码？很重的一页，这里不能发……
嗨！你熟悉media queries 和Fluid Grids 也许这对你有帮助。 <meta name="viewport" content="width=device-width, initial-scale=1" /> 是拥有Responsive Web Design 的重要部分之一。
@jhunlio ：它不起作用...

标签： android html css

【解决方案1】：

尝试将宽度设置为 100%

<meta name="viewport" content="width=100%, initial-scale=1" />

编辑：你也可以试试这个：

test.html

<html>
<head>
<meta />
</head>
<body>
<div style="background-color:red; width: 100%">
<div style="background-color:green; width:80%">
hello world
<a href="test2.html">Go next page</a>
</div>
</div>
</body>
</html>

test2.html

<html>
<head>
</head>
<body>
<div style="background-color:blue; width: 100%">
<div style="background-color:yellow; width: 80%">
houston we have a problem
<a href="test.html">Go prev page</a>
</div>
</div>
</body>
</html>

百分比应自动采用您的设备宽度。

【讨论】：

不幸的是，我不能使用百分比，因为在最后一页我有几张不同尺寸的图片：我不想对每张图片都应用一些重新缩放百分比。

【解决方案2】：

我以为我遇到了同样的问题，因为我有一个 100% 宽度的顶部，然后我在手机上看到它，它切入了居中包装和其中的内容。

我的解决方案是在外部设置 min-width，所以如果你没有任何外部 div，请在 body 上设置 min-width。

【讨论】：