自动缩放网页以适应移动屏幕答案

【问题标题】：auto scale webpage to fit mobile screen自动缩放网页以适应移动屏幕
【发布时间】：2016-06-18 13:54:09
【问题描述】：

假设我已经为所有智能手机准备了一个移动版本，并且我为我的横幅选择了 320 像素 - 背景图片 (320x177)，代码如下所示：

@media only screen and (max-width: 400px) and (orientation : portrait) {
    body {margin: auto; max-width:320px}
    #banner {height: 177px; max-width: 100%; background-position: center top; background-repeat: no-repeat;  background-size: contain;}
    #banner {background-image: url("background320.jpg"); border:1px solid black;}
    #banner span {margin:15% 0 0 10%}   
    #content {max-width: 100%; height: 1000px; border:1px solid black;}
}

<div id="banner">
   <span>Banner Title</span>
</div>
<div id="content"> Some content </div>

在这种情况下，如果屏幕较大（例如我的手机 360 像素宽纵向），我会在左侧和右侧出现白色条纹。我不想为 360px 制作另一个移动版本，但我只想放大页面以适应屏幕（就像你用两根手指手动做的一样）。如果屏幕较小，则将按比例缩小以适合窗口。怎么做？或者参考这个例子应该如何正确完成？

编辑：我尝试使用background-size: 100% 100% 在不同屏幕分辨率下显示时保持背景纵横比，但高度总是存在问题。如果我没有设置静态高度height:177px，那么背景高度仅与里面的内容一样高，或者如果里面没有内容，则根本不会出现。当必须在不同的屏幕分辨率上显示时，静态高度也很糟糕。您如何在不制作其他移动版本的情况下解决此问题？

【问题讨论】：

标签： css responsive-design media-queries

【解决方案1】：

使用background-size:cover 或background-size:100%，而不是background-size:contain。

编辑： 听起来您希望 div 保持图像的纵横比。如果是这样，您可以在具有垂直填充的 div 上使用零高度：

#banner {
    background-image: url(http://placehold.it/320x177);
    background-size: 100% 100%;
    padding-top: 55.3125%;
}

&lt;div id="banner"&gt;&lt;/div&gt;

【讨论】：

@soonic 您是否试图在所有屏幕上保持 div 的纵横比相等？检查更新的答案
好吧，当我在<div id="banner"></div> 里面有东西时会出现问题，当我使用零高度和这个填充时它会变得一团糟。它保持图像的正确纵横比，但 div 的内容看起来并不好。实际上，我在问是否可以自动缩放整个页面以适应窗口（比如用两根手指放大/缩小）？
我更新了我的帖子问题。如果我在横幅 div 中没有内容，您的回答可能会很好，但如果有，那么它对我不起作用。
@soonic 您可以将覆盖 div 与 position:absolute 一起使用。
@soonic 或者您可以尝试在视口标签中设置固定宽度：<meta name="viewport" content="width=320">

【解决方案2】：

使用引导程序。无需为不同的尺寸制作不同的布局，它是用于流体布局的预制 css。所以使用它的类。这里是引导程序的链接http://getbootstrap.com/ 下载引导程序 css 链接它在 html 和对两个 div 使用“col-md-6”类。它们会响应屏幕尺寸。

【讨论】：