Question

我正在尝试让我的网站自动调整以适应用户屏幕，包括更小的屏幕，例如iphone5s。一切都是在24英寸的屏幕上创建的，显示器分辨率为2560 x 1440.

我创建了一个容器块，它包含所有内容并居中。我现在的CSS是这样的:(。background是内容集中的块的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宽。此外，还有视口的概念。网上有很多关于此的资料，所以不要重新解释，请参阅以下网址，以便更好地解释它，并举例说明：

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

TLDR：将以下内容添加到html页面的标题中

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

干杯！

编辑：

关于使用％值缩放到屏幕而不是硬像素值的布局平台的其他答案（适用于与最大1024px宽的iPad等设备进行比较），或css媒体查询以根据在构建响应式（谷歌术语）网站时，屏幕大小也是一件好事。

Answer 2

为了节省大量时间，我强烈建议使用Bootstrap的网格系统。它允许您定义多个div宽度，可以＆＃34;堆叠＆＃34;或者＆＃34;拉＆＃34;如你所定义。这是一个很短的学习曲线，但它是最容易处理自适应调整大小的一个。

网格基于12列系统。因此，如果您在4列中定义一个，则第二个（或第三个或第四个）必须添加到8，例如。列根据屏幕宽度自动调整，但屏幕上始终显示12。您可以告诉它在移动大小的div中更改为12列，例如，只需在类中添加col-xs的第二个定义。这一切都很明确here

一个具有2 / 3rds，1/3布局的流体容器的示例，在小型设备上将以100％的比例折叠为1比1：

<div class="container-fluid">
  <div class="row">
     <div class="col-md-8 col-xs-12">bigger</div>
     <div class="col-md-4 col-xs-12">smaller</div>
  </div>
</div>

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

2 个答案: