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有问题。此设备视口宽度为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;
}

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

Answer 2

为什么要将网站宽600px？您应该默认情况下使网站填充视口的100％，然后调整内容周围的边距font-size，每个屏幕大小的图像大小等，以便内容适应。

您可以以this site为例。如果您尝试使浏览器窗口变得越来越小，您将看到所有内容都适应（甚至当视口很小时也会显示移动菜单）所有这些都是使用不同屏幕尺寸的媒体查询完成的。

（抱歉我的语法）

网站没有填满iPad上的屏幕

2 个答案: