尽管视口具有初始比例= 1.0，为什么自适应页面仍显示为放大状态答案

【问题标题】：Why does adaptive page appear in zoom-in state despite the fact the viewport has initial-scale=1.0尽管视口具有初始比例= 1.0，为什么自适应页面仍显示为放大状态
【发布时间】：2016-01-26 05:59:24
【问题描述】：

目前我正在制作自适应网页并面临以下问题。如果您在移动设备浏览器中打开此page，您会看到它立即以放大效果出现。而且您需要手动将其缩小，尽管它具有以下视口：

<meta name='viewport' content='width=device-width, initial-scale=1.0'/>

但是如果设置这个视口：

<meta name='viewport' content='width=device-width, maximum-scale=1.0'/>

和open it 然后我们将得到我们需要的效果（没有缩放的页面）。

谁能解释一下为什么会发生（视口值的不合逻辑行为）？

提前致谢！

【问题讨论】：

标签： html css media-queries viewport mobile-browser

【解决方案1】：

本质上，您的问题将是“width=device-width”告诉浏览器您的设计将在该浏览器的 css 宽度下工作。这可以在手机上低至 320 像素。但是，您的设计不会响应性地缩小到这么小的任何地方 - 它只会下降到 732 像素。

因此，当您将初始比例设置为 1 时，您只会在屏幕上看到前 320 个像素。

我相信，如果您只是不定义视口，那么它将按照您的意愿工作 - 从显示所有内容的缩放开始是大多数设备的默认行为。这就是为什么 width=device-width, maximum-scale=1.0 会起作用的原因（没有设置开始缩放，所以它将使用默认值）。然而，maximum-scale 会限制用户可以缩放的距离。

（This 似乎是一个很好的概述）

【讨论】：

非常感谢！您的回答帮助我理解了它是如何工作的。