我正在 build 一个在台式机和移动设备上宽度为 700 像素的网站。在桌面上，700px 的 div 居中。在移动设备上，700 像素的 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 智能手机上，浏览器会直接放大并且只显示大约 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
最佳答案
使用这个
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
解释:
A <meta> viewport 元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。
width=device-width部分设置页面宽度以跟随设备的屏幕宽度(这将因设备而异)。
initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。
这是一个没有视口(viewport)元标记的网页示例，以及带有视口(viewport)元标记的同一网页:
演示
阅读此 - https://css-tricks.com/snippets/html/responsive-meta-tag/还有这个http://www.w3schools.com/css/css_rwd_viewport.asp
关于html - 移动网站视口(viewport)精确宽度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33955056/