Question

我有液体布局网站，在1920x1080px上显示（8 x 240px）列。它们之间没有空格。我把这个添加到了HEAD：

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" >
<meta name="viewport" content="width=device-width; height=device-height;">

我在上面的代码中尝试了不同的设置，但无论我在iPhone 2G和4S上做什么，它总是显示（4 x 240px）列（480×320px和960x640px分辨率）。

我希望它显示3或2列，因为第一列包含文本，现在几乎无法读取。

我只想在iPhone上将宽度除以2。怎么办呢？

此外，当我制作浏览器480x320px时，我的网站在iPhone（480x320px）和桌面上的显示方式不同。那是为什么？

Answer 1

之前我没有使用meta viewport，但设置两次似乎很奇怪，为什么在一个中使用分号;而在另一个中使用逗号,？

这对我来说似乎更合适，但我没有测试过它;

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" />

希望它有所帮助！

Answer 2

我发现的最好方法是使用jquery根据屏幕大小切换视口设置。

if($(window).width() >= 768) {
    // Change viewport for smaller devices
    $('meta[name=viewport]').attr('content','width=959');
}

如何将网站扩展到iPhone的宽度？

2 个答案: