视口，网站宽度和iPad

Question

我在这里有一个临时网站：http://studioteknik.co/solertia.ca/equipe-rh/ 模板网站已经设计为1092像素，在大显示器上一切都呼吸，一切都很好。但是在我的iPad上是1024px，左边的所有文字都在屏幕旁边......没有空间，这很难看。

我喜欢的是告诉视口看起来像一个1200px的显示器，然后将它取下来。

如果我说：<meta name="viewport" content="width=1200">它根本不做任何事......一切看起来都很糟糕！

有什么想法吗？

Answer 1

如果您正在构建自适应网站，那么以下元标记在Twitter等Bootstrap

等软件包中是标准的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此外，如果您想在小屏幕上向网站添加额外的样式（如填充），您可以使用CSS媒体查询，如下所示：

@media screen and (max-width: 1024px) {

.content {
padding: 0 20px;
}

}

这会阻止您的内容触及屏幕边缘。

常见的响应断点为explained here