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

Question

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

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

我遇到的问题是，480像素宽的Android测试设备看起来过于放大，我尝试使用元视口标签的不同变体来处理这个问题。以下每一项都是独立尝试，没有产生预期的效果。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />

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

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

这主要是在设计图像的问题被用作背景图像的元素和在PX尺寸定义的其他元素。我们将所有印刷版的大小设置为EM，因此一个简单的媒体查询可以调整所有版式，但图标和布局图形仍然不正确。

移动网络对我来说有点未知，我想找到一种方法来处理这个与视口设置，而不是定义其他媒体查询。我的理解是，视口元存在的目的是帮助处理跨多个视口尺寸的这类问题，而不必在每次稍微不同的视口上市时定义新的媒体查询。

如果我的方法关闭，请分享一个更好的方法的参考。我们有一些需要流畅和相当固定的元素，这使得这是一个挑战，但我愿意提供建议！

Answer 1

这些替换您的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是如何布局的想法。