网站无法填满 iPad 上的屏幕答案

【问题标题】：Site doesn't fill the screen on the iPad网站无法填满 iPad 上的屏幕
【发布时间】：2014-03-15 12:45:03
【问题描述】：

我正在开发一个 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 屏幕？

提前致谢

【问题讨论】：

也许您可以使站点流动而不是具有如此严格的断点宽度。在某些设备上，即使您将其居中 - 您将在站点边缘浪费大量空间 - 在某些尺寸的屏幕上。

标签： html css ipad responsive-design media-queries

【解决方案1】：

试试这个：

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

或者将容器居中（假设它是 600px 宽）

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

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

【讨论】：

【解决方案2】：

为什么要将网站设为 600 像素宽？您应该让网站默认填充 100% 的视口，然后针对每个屏幕尺寸调整内容周围的边距、font-size、图像大小等，以便内容适应。

您可以以this site 为例。如果您尝试让浏览器窗口变得越来越小，您会发现所有内容都在适应（当视口那么小时，甚至会出现移动菜单）所有这些都是使用针对不同屏幕尺寸的媒体查询来完成的。

（对不起我的语法）

【讨论】：