Question

我在使网站正确扩展移动设备方面遇到了一些问题。

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

<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上，（分辨率为640px）如果我使用“initial-scale = 1.0”，它将在640px下正确缩放。

或者，如果图形是480px，3G将需要scale = .667而iOS 4需要1.3，是否正确？

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

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

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

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

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

Answer 2

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

“initial-scale”用于覆盖某些设备的默认行为，以放大或缩小您的网站，以便网站宽度（您在上面指定的）与屏幕宽度相匹配。将此设置为1基本上表示“不要放大这个，如果我的网站对于屏幕太宽则使用滚动条，如果它太窄则在侧面留下空白”。如果您确实希望您的网站完全填满屏幕宽度，请不要使用初始比例。

Answer 3

好的，我已经弄明白了......基本上。

因为我的设计实际上是视口大小的2倍（排序），关键是使用“初始比例= 0.5”。它可以在两个设备（3Gs和4）上正常工作，在Android设备上也可以正常工作等。

有点棘手，似乎应该有一个更好的方法来做到这一点，但暂时，它的工作原理。

感谢所有提供输入的人。

Answer 4

我相信答案是你要告诉网络浏览器始终将网站缩放到640像素。我甚至会关闭用户扩展网站的能力，以便流浪的拖拽不会重新调整大小。

试试这个：

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

困惑于“初始规模= 1.0” - iphone 3GS vs 4

4 个答案: