Question

有人知道为什么尽管使用了meta视口标签，如果为身体指定了最小宽度，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上大幅放大，但没有侧面滚动，即文本很大，但宽度实际上不再溢出。与装载相同样式表并且完美呈现的Androids相比，这是完全错误的。我可以通过将标记更改为：

来修复它

<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浏览器的Motorola RAZR（540x800px）上，当默认缩放设置为：

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

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

我提到的所有内容显然没有选项可以调整IE移动设备或Safari上的默认缩放设置（我也在iPhone上的Dolphin中测试了这个，结果相同）。我想检查一下Safari，Dolphin和IE mob对缩放的处理方式不同。由于我的问题最初困扰Android并且在Safari和Dolphin中工作正常（在我添加＆lt; meta =“Viewport”...＆gt;标记之前），默认缩放是我唯一的怀疑。有什么想法吗？

Answer 1

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

默认移动浏览器仅在Safari和IE移动设备中缩放

1 个答案: