0

<div>我有一个三星 Galaxy Note 2，我使用 chrome 浏览器显示一个顶部宽度为 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

我怎样才能一次获得我的 1280px 并为我的所有网页？

4

2 回答 2

0

尝试将宽度设置为 100%

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

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

测试.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>

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

于 2013-04-19T10:21:50.813 回答
0

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

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

于 2015-04-03T13:26:24.533 回答