在“initial-scale=1.0”上感到困惑 - iPhone 3GS与4有何区别？

Question

我在让我的网站在移动设备上正确缩放方面遇到了一些问题。

我们的网站设计最小宽度为640px，最大宽度没有限制。我当前使用的 meta 标签是：

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

现在，我感到困惑的部分是，如果我使用“initial-scale=1.0”，显然网站将按比例缩放，而在iphone 3Gs上看起来很糟糕（只能看到一半的网站）。而如果我使用“initial-scale=1.0”，在iphone 4上（具有640像素宽度分辨率）将以640像素正确缩放。

或者，如果图形为480像素，则3Gs需要scale=.667，iOS 4需要1.3，正确吗？

那么如何使网站完美地适应边缘？浏览器是否可以检测设备宽度，然后相应地设置缩放比例？？有许多不同的设备宽度...android、旧版iPhone、黑莓等。

感到相当沮丧：（感觉自己错过了某些重要的东西，本应该已经知道。

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

我似乎遇到的问题是视口不会根据设备而缩放，无论我使用什么标签，它都保持在640像素。我错过了什么？

- Jonathan Coe

---

https://dev59.com/ZWcs5IYBdhLWcg3wlFE2#19430097 - Habib

Answer 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

- Rick Strahl

---

使用这个方法，但是不使用 initial-scale 初始缩放参数可以解决问题。我在旋转设备时遇到了一些麻烦。width=device-width,maximum-scale=1, user-scalable=no", name: "viewport" - Dennis Best

Answer 2

"width"是告诉浏览器你的网站在100%缩放时有多宽。如果你设计的网站是流式的，可以在这里指定“device-width”，浏览器就不需要使用任何缩放，因为你的布局被设计成适合任何视口宽度。

"initial-scale"用于覆盖某些设备的默认行为，以便缩放或放大你的网站，使网站宽度（你上面指定的）与屏幕宽度相匹配。将其设置为1基本上表示“不要为此缩放，在我的网站过宽时使用滚动条，在过窄时留出空白空间”。如果你确实想让你的网站完全填满屏幕宽度，请不要使用initial-scale。

- londonwebguy

Answer 3

好的，我已经基本弄清楚了......实际上。

因为我的设计实际上是视口大小的2倍（有点），关键就是使用“initial scale = 0.5”。它在两个设备（3Gs和4）上都可以正确地工作，并且在Android设备上基本上也可以正确地工作。

有点棘手，似乎应该有更好的方法来解决这个问题，但暂时这样做可以。

感谢所有提供意见的人。

- Jonathan Coe

---

我曾经遇到过完全相同的问题，并使用了完全相同的解决方案... 我想知道你是否找到了更好的处理方法？ - jac300

接近2015年的尾声，我想同样的问题。这仍然是最好的解决方案吗？它对我起作用了，但感觉很不好。在我的情况下，我使用了0.67。我认为比例尺应根据设备的像素密度而异。这感觉不对，但没有更好的解决方案。 - Spencer

Answer 4

我认为你想要告诉浏览器始终将网站缩放到640像素。我甚至会关闭用户缩放网站的能力，以防止意外拖动重新调整大小。

尝试以下步骤：

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

- profMobi

---

尝试过了...不起作用...在“宽度”字段中，实际上没有任何东西起作用。尝试了device-width、640、320，都没有改变网站的比例。只有initial-scale有用，但那只适用于一个设备，所以没什么帮助 :( - Jonathan Coe

禁止用户在移动设备上缩放页面非常不易用。 - TravisO

使用固定像素宽度对我们来说效果最佳，但不要使用可缩放功能。 - Mike R

@TravisO 如果你的Web应用程序一开始就采用响应式设计，那么它并不会影响可用性。也就是说，要么不使用桌面断点呈现相同的结构，要么使用样式，使移动用户首先不必缩放。 - Ben Sewards