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

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,3Gs将需要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

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

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

Answer 3

好吧,我已经弄清楚了......基本上.

因为我的设计实际上是视口大小的2倍(排序),关键是使用"初始比例= 0.5".它可以在两个设备(3Gs和4)上正常工作,在Android设备上或多或少都能正常工作等.

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

感谢所有提供输入的人.

Answer 4

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

试试这个:

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