html - 如何让我的网站自动调整以适应不同的屏幕尺寸？

Question

我正在尝试让我的网站自动调整以适应用户屏幕，包括小得多的屏幕，例如 iphone5s。所有内容均在 24 英寸屏幕上创建，显示器分辨率为 2560 x 1440。

我创建了一个包含所有内容并居中的容器 block 。 我当前的 CSS 如下:(.background 是内容居中的 block 的 CSS，.container 包含整个 HTML。) 现在，iphone5 的屏幕似乎被放大了，为了看到内容，用户必须向右滚动。前几天我也在另一台电脑上测试过这个，它也有同样的问题。此外，我在我的 HTML 中使用了这个元标记:

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

有人在我的 CSS 中看到将内容拉到右边的问题吗？为什么内容如此之大，需要缩小才能在手持设备上查看？

.background {
margin: auto;
padding: auto;
border-style: solid;
border-width: 100px;
border-color: #30333B;
background-color: #30333B;
border-radius: 7px 7px 7px 10px;
}
.container {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
}

Answer 1

这里有几个问题。在移动设备上，尤其是带有视网膜屏幕的 iOS 设备，它以正常像素值的 2 倍呈现所有内容。例如，iPhone 4s 的宽度为 640 像素，但实际显示为 320 像素。 此外，还有视口(viewport)的概念。网上有很多关于此的资料，因此与其重新解释它，不如查看以下 URL 以更好地解释它，并附有示例:

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

长篇大论: 将以下内容添加到您的 html 页面的标题中

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

干杯!

编辑:

关于使用百分比值而不是硬像素值缩放到屏幕的布局平台的其他答案(有利于与最大 1024 像素宽的 iPad 等设备进行比较)，或 css 媒体查询根据屏幕大小，也是构建响应式(谷歌术语)网站时要考虑的好事。