Question

我建立了一个在桌面和移动设备上宽度为700px的网站。在桌面上700px div居中。在移动设备上，700px div只需要填满屏幕。

以下测试代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=700" />
    <style>
        div#wrapper
        {
            width:700px;
            margin-left:auto;
            margin-right:auto;
        }
    </style>
</head>
<body>
    <div id="wrapper">
         <img src="/test.jpg" alt="Test image 700px width in 100px strips" />
    </div>
</body>
</html>

这适用于桌面浏览器和大多数手机。 然而，在我的女儿cheapo智能手机上，浏览器会直接放大，只显示大约350px。

我该如何处理这个问题。你会认为解决这个问题很容易，但事实并非如此！弄乱其他元标记属性（初始缩放等）对这个特定的智能手机没有影响。

华为手机浏览器代理：Modzilla / 5.0（Linux; U; Andriod 4.2.2; en-gb; HUAWEI Y330-U01 Build / HuaweiY330-U01）AppleWebKit / 534.30（KHTML，likeGecko）版本/ 4.0 Mobile Safari /534.30

Answer 1

使用此

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

说明：

<meta>视口元素为浏览器提供了有关如何控制页面尺寸和缩放的说明。

width=device-width部分将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。

initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

以下是没有视口元标记的网页示例，以及带有视口元标记的同一网页：

<强>演示

阅读本文 - https://css-tricks.com/snippets/html/responsive-meta-tag/和此http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 2

我没有Android设备来验证这一点，但也许这可以用相对宽度和maximum width来解决：

<style type="text/css">
    div#wrapper
    {
        width:100%;
        max-width:700px;
        margin-left:auto;
        margin-right:auto;
    }
</style>

max-width会在满足条件时覆盖width，因此在您女儿的手机上显示的较小的显示屏应使用全宽，而较大的显示屏仅为700像素宽。

（我已将type属性添加到您的<style>标记中以确保完整性。如果没有它，您的代码应该会正常呈现。）

Answer 3

试试这个，希望它能解决你的问题

<meta name="viewport" content="width=device-width"/>

而不是

<meta name="viewport" content="width=700" />

Answer 4

我会将CSS宽度设置为100％，而不是700px。通常最好在可能的情况下避免使用硬编码尺寸。另外，如另一个答案所示，max-width可能很有用，因为它在指定时覆盖宽度。然后，您可以使用屏幕尺寸媒体查询（https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）在大型显示器上围绕图像放置边框div。

Answer 5

在头标记

中添加以下链接

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

样式表

<style type="text/css">
@media only screen and (max-width: 699px)//media query for the resolution below 700px {
    div#wrapper
        {
            width:100%;// this will took full width
        }
}
</style>

移动网站视口精确宽度问题

5 个答案: