0

有谁知道为什么尽管使用了元视口标签，但如果将最小宽度分配给正文，Safari 和 IE 移动版仍然会在加载时放大页面？我搜索了很多，但我的具体案例似乎没有记录，所以我将详细介绍。

我已经在标题中有这个：

<meta name="Viewport" content="width=device-width, initial-scale=1">

我的页面在 Android 浏览器中完美缩放。在每个样式表中都有这段代码来强制比例，以防样式表被错误加载：

body {
    min-width:(whatever the minimum device width is for the media query);
}

所以对于 iPhone 4 和其他高 DPI 显示器，我有：

body {
    min-width:640px;
}

当我删除最小宽度时，比例在 iPhone 4 上出现大幅放大，但没有横向滚动，即文本很大，但宽度实际上不再溢出。与加载相同样式表并完美显示的 Android 相比，这是完全错误的。我可以通过将标签更改为读取来修复它：

<meta name="Viewport" content="width=device-width, initial-scale=0.5">

但这只会在所有其他浏览器中导致微小的文本缩放问题。造成大多数人的问题以迎合少数人。不好。

需要注意的是，一些移动浏览器会根据其默认缩放设置读取不同的媒体查询。以下是我的情况（简化媒体查询以节省空间）：

<link media="only screen and (min-device-width:0px) and (max-device-width:1280px)" href="webfiles/mob_default.css" />
<link media="only screen and (min-device-width:640px) and (max-device-width:1280px)" href="webfiles/mob_vhigh.css" />
<link media="only screen and (min-device-width:480px) and (max-device-width:639px)" href="webfiles/mob_high.css" />
<link media="only screen and (min-device-width:360px) and (max-device-width:479px)" href="webfiles/mob_mid.css" />
<link media="only screen and (min-device-width:0px) and (max-device-width:359px)" href="webfiles/mob_small.css" />
<link media="only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) and (min-device-width:640px)" href="webfiles/mob_vhigh.css" />

在使用默认 Android 浏览器的摩托罗拉 RAZR (540x800px) 上，默认缩放设置为：

  • 'far'，它将加载 480-639px 宽的样式表。（正确的屏幕物理分辨率）
  • 'mid'，它加载 360-479px 宽的样式表
  • 'close' 加载 '0-359px 宽的样式表

虽然这实际上是一种处理缩放的更优雅的方式，而不是在页面上物理放大并需要横向滚动，但不知道如何处理默认缩放导致浪费大量时间试图找出为什么我的媒体查询“不起作用” '。

我提到所有这些的原因显然是没有选项可以调整 IE 移动设备或 Safari 上的默认缩放设置（我也在 iPhone 上的 Dolphin 中对此进行了测试，结果相同）。我想检查一下 Safari、Dolphin 和 IE mob 处理缩放的方式是否不同。由于我的问题最初是困扰 Android 并且在 Safari 和 Dolphin 中运行良好（在我添加 <meta="Viewport"...> 标记之前），默认缩放是我唯一的怀疑。有任何想法吗？

4

1 回答 1

1

对于 iPhone 4 和其他高分辨率显示器，将最小宽度设置为 320 像素以考虑 2:1 像素比。

于 2013-01-04T04:35:57.773 回答