不幸的是，手机具有如此高的屏幕分辨率，我的网站远远不够小。当放大桌面浏览器时，它可以完美适应，但不幸的是，在移动浏览器上，网页视口大小一旦放大就不会实际改变。为了尝试解决这个问题，我已经获得了一个检测移动用户代理的脚本，然后将主体宽度设置为500px，这看起来是完美的宽度，但不幸的是，即使我设置了元数据后移动浏览器也没有将其视口设置为500对于viewport 500，这导致我的网页呈现在浏览器的角落。一旦放大它看起来很好，但这不是我想要的。我的网站在某种程度上类似于nokia.com，我希望它在移动客户端上以相同的方式运行。
有人可以告诉我这样做的正确程序是什么，因为我不是一个合适的网络开发者，我只是这样做才能学习。
这是我的元：
<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">
答案 0 :(得分：2)
您需要为较小的浏览器大小编写条件CSS规则。
一个例子：
@media screen and (min-width: 768px) {
.item1{}
.item2{}
}
这是我刚刚通过快速谷歌搜索找到的一个网站，应该能够让你至少开始。 http://www.conditional-css.com/usage
祝你学习顺利！
答案 1 :(得分：1)
最好使用@media个查询（可用css3）
类似的东西：
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) /* You can change this value per your requirements */
{
/* Your custom styles for mobile device */
}
答案 2 :(得分：0)
试试这个
<meta name="viewport" content="width=device-width", maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0 />
并使用媒体查询来定位所有屏幕尺寸
http://blog.teamtreehouse.com/thinking-ahead-css-device-adaptation-with-viewport
希望这有助于你
答案 3 :(得分：0)
终于解决了！看起来我遇到这么多麻烦的原因是因为我测试的移动设备是Windows Phone 8设备，显然WP8对视口元标记反应不太好。通过添加MobileOptimized元标记可以轻松解决这个问题。