html - 网站没有填满 iPad 的屏幕

Question

我正在开发一个 600 像素宽的网站，并使用响应式查询使其适合不同的设备。我正在使用以下代码:

<meta name="viewport" content="width=device-width" />

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* iPhone */
    .container { width: 100%; max-width: 480px; }
    ...
}   

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* iPad */
    ...
}

不过，我对 iPad 有疑问。此设备视口(viewport)的宽度为 768 像素，因此网站可以正确呈现，但会向左移动，因为它的宽度较窄。

我的问题是，有没有办法让网站居中或者让它填满整个 iPad 屏幕？

提前致谢

Answer 1

试试这个:

<meta name="viewport" content="600" />

更多相关信息:https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

或者将容器居中(假设它是 600px 宽)

.container {
    width:600px;
    margin:0 auto;
}

虽然首先可能值得将网站扩大。