Android 将安卓480w视为缩放后的320/640w移动网页设计

我的设计师给了我一个640w的设计，可以在iPhone和Android手机网站上使用

我使用320w的测量值进行了所有设置，并用基于像素比率的媒体查询替换了图形。这主要是因为设计中的图像被用作元素和PX维度中定义的其他元素的背景图像。我们已经将所有的排版都定为EM的大小，因此一个简单的媒体查询可以调整所有的排版，但图标和布局图形仍然不正确

我遇到的问题是，480px宽的Android测试设备看起来太小了，我尝试使用meta viewport标记的不同变体来处理这个问题。以下每一项都是单独尝试的，没有产生预期的效果

这主要是因为设计中的图像被用作元素和PX维度中定义的其他元素的背景图像。我们已经将所有的排版都定为EM的大小，因此一个简单的媒体查询可以调整所有的排版，但图标和布局图形仍然不正确

移动网络对我来说有点未知，我想找到一种方法，通过视口设置来处理这个问题，而不是定义额外的媒体查询。我的理解是，viewport meta的存在有助于跨多个视口大小处理此类问题，而无需在每次略有不同的视口上市时定义新的媒体查询

---

如果我的方法无效，请分享一个更好方法的参考。我们有一个需要流动和相当固定的元素组合，这使这成为一个挑战，但我愿意接受建议

用这些替换元标记，看看是否有帮助：

<meta name="HandheldFriendly"   content="True">
<meta name="MobileOptimized"    content="320">
<meta name="viewport"           content="width=device-width, initial-scale=1, maximum-scale=1">

---

如果这些没有帮助，那么查看您的代码，了解CSS和HTML的布局将有助于解决问题。

谢谢，我认为是我丢失的MobileOptimized meta标记帮助解决了问题。这在三星Galaxy S3上不起作用-一个320宽的网站仍然显示在右侧，有一个空白