0

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

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

我遇到的问题是 480px 宽的 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 的大小，因此一个简单的媒体查询可以调整所有排版，但图标和布局图形仍然不正确。

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

如果我的方法不可行，请分享对更好方法的参考。我们混合了需要流动且相当固定的元素，这使得这是一个挑战，但我愿意接受建议！

4

1 回答 1

2

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

<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 的布局方式会有所帮助。

于 2012-06-13T17:55:40.343 回答