对“initial-scale = 1.0”感到困惑 - iphone 3GS vs 4 [重复]答案

【问题标题】：Confused on "initial-scale=1.0" - iphone 3GS vs 4 [duplicate]对“initial-scale = 1.0”感到困惑 - iphone 3GS vs 4 [重复]
【发布时间】：2011-11-01 10:07:05
【问题描述】：

我在让我的网站针对移动设备正确扩展时遇到了一些问题。

我们有一个设计为最小宽度为 640 像素的网站，最大宽度为 640 像素。我目前有元标记：

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

现在 - 我感到困惑的部分是，如果我使用“initial-scale=1.0”，显然该站点将按 1:1 缩放，并且在 iphone 3Gs 上看起来很糟糕（只会看到一半的站点）。现在，在 Iphone 4（具有 640 像素宽的分辨率）上，如果我使用“initial-scale=1.0”，它将正确缩放到 640 像素。

或者，如果图形是 480 像素，3G 需要 scale=.667 而 iOS 4 需要 1.3，对吗？

那么，如何让网站完美地适应边缘到边缘？浏览器可以检测设备宽度然后相应地设置比例吗？那里有很多不同的设备宽度... android、旧版 iphone、黑莓等。

变得非常沮丧:(感觉我错过了一些我应该已经知道的重要事情。

编辑 'initial-scale' 元标记似乎应该相对于视口缩放网站，然后使用 width=device-width 设置实际视口大小。

我似乎遇到的问题是视口没有缩放以适应设备，无论我使用什么标签，它都保持在 640 像素。我在这里错过了什么？？？

【问题讨论】：

stackoverflow.com/questions/12723844/…

标签： html mobile css

【解决方案1】：

我认为原始消息的主要问题是分号似乎不适用于 iPhone 4+。它仅适用于逗号作为分隔符（或仅使用设备宽度设置）。其他浏览器似乎更宽容。

以下内容对我来说可靠：

<meta name="viewport" 
      content="width=device-width,initial-scale=1,maximum-scale=1" />

您还需要禁止正文和文档水平滚动：

body, html
{    
    overflow-x: hidden;        
}

有关 Mozilla 网站更多信息的好链接：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

【讨论】：

使用这个，但离开初始规模对我有用。我在旋转设备时遇到了问题。 width=device-width,maximum-scale=1, user-scalable=no", name: "viewport"

【解决方案2】：

“宽度”是告诉浏览器您的网站在 100% 缩放时的宽度。如果您将网站设计为流畅，则可以在此处指定“设备宽度”，并且浏览器无需使用任何缩放，因为您的布局旨在适应任何视口宽度。

“initial-scale”用于覆盖某些设备的默认行为以放大或缩小您的网站，以便网站宽度（您在上面指定）与屏幕宽度匹配。将此设置为 1 基本上表示“不要为此缩放，如果我的网站对于屏幕来说太宽，请使用滚动条，如果太窄，请在两侧留出空白区域”。如果您确实希望您的网站准确地填充屏幕宽度，请不要使用 initial-scale。

【讨论】：

【解决方案3】：

好的，我已经想通了……基本上。

因为我的设计实际上是视口大小的 2 倍（有点），关键是使用“初始比例 = 0.5”。它在两种设备（3G 和 4）上都能正常工作，在 android 设备等上或多或少都能正常工作。

有点棘手，似乎应该有更好的方法来做到这一点，但就目前而言，它有效。

感谢所有提供意见的人。

【讨论】：

我遇到了同样的问题并使用了同样的解决方案......我想知道你是否找到了更好的方法来处理这个问题？
这里接近 2015 年底，我想知道同样的事情。这仍然是最好的解决方案吗？它对我有用，但感觉很脏。就我而言，我使用了 0.67。我认为比例应该根据设备的像素密度而有所不同。这感觉不对，但没有其他更好的方法。

【解决方案4】：

我相信答案是您想告诉网络浏览器始终将网站缩放到 640 像素。我什至会关闭用户缩放网站的功能，这样杂散的拖拽就不会重新调整所有内容的大小。

试试这个：

<meta name="viewport" content="width=640; user-scalable=no;" />

【讨论】：

试过...不起作用...在“宽度”字段中实际上没有任何作用。尝试了设备宽度，尝试了 640，尝试了 320，没有任何改变站点的规模。只有初始规模可以做任何事情，但这只是特定于一个设备，所以没有帮助:(
阻止用户在移动设备上缩放页面是非常反可用性的。
使用固定像素宽度对我们来说效果最好，但不要使用可缩放功能。
@TravisO 如果您的 Web 应用程序首先是使用响应式设计构建的，那么这并不是反可用性。即要么不使用桌面断点将呈现的相同结构，和/或使用样式，以便移动用户不必首先放大。