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

【问题标题】：Mobile website viewport exact width issue移动网站视口精确宽度问题
【发布时间】：2016-03-01 12:26:33
【问题描述】：

我正在构建一个在台式机和移动设备上宽度为 700 像素的网站。在桌面上，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>

这适用于桌面浏览器和大多数手机。 但是在我女儿的廉价智能手机上，浏览器会放大，仅显示大约 350 像素。

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

华为手机浏览器代理：Modzilla/5.0(Linux; U; Andriod 4.2.2;en-gb;HUAWEI Y330-U01 Build/HuaweiY330-U01)AppleWebKit/534.30(KHTML, likeGecko)Version/4.0 Mobile Safari /534.30

【问题讨论】：

而不是硬编码图像的宽度使用媒体查询 - 下面的网站讲述了一些标准尺寸css-tricks.com/snippets/css/media-queries-for-standard-devices，下一个链接有更多尺寸特定的媒体查询nmsdvid.com/snippets
我认为这个问题可以通过将宽度设置为 % 而不是固定像素宽度来解决。但是使用媒体查询为桌面版本设置不同的宽度。
能否提供截图和网址以便于理解

标签： html mobile width viewport

【解决方案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

【讨论】：

【解决方案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> 标记中。没有它，您的代码应该可以正常呈现。）

【讨论】：

【解决方案3】：

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

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

而不是

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

在head标签内添加以下链接

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

【讨论】：