html - 如何使网页在 1920 像素和 1366 像素(笔记本电脑)屏幕尺寸上兼容？

Question

我正在开发一个要求为 1920 * 1080 像素的网站。总共有五个部分，每个部分都是相同的规范(宽度为 1920，高度为 1080)。我没有使用 bootstrap 容器，因为它的宽度是 960px 并且还使用 container-fluid 我无法获得预期的输出。所以我在 scss 中设置了每个 div 的宽度和高度，页面在 1920px 屏幕尺寸上看起来不错。但是当我在我的笔记本电脑上打开它时，它被裁剪得非常糟糕。我还使用了多个图像，覆盖了位置和 z-index 属性。html结构如下:

<div id="page_index">
 <div class="wrapper">
  <div id="one">
    <div class="row">
      <div class="col-xs-12 text-center">
      <!-- Here are the contents -->
      </div>
    </div>
  </div>
   <!-- div id=two, three, four, five goes here -->
 </div>
</div>

下面是我设置高度和宽度的一个div的例子:

#one {
    background-color: $g_color_blue_promotion;
    width: 1920px;
    min-width: 100%;
    margin: 0 auto;
    height: 1080px;
    font-family: 'Open Sans', sans-serif;
    position: relative;
}

在这种情况下，应该怎样做才能使其适合两种屏幕尺寸？请注意，此页面不需要响应，但至少，用户应该能够在两种屏幕尺寸上查看它。

Answer 1

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

在你的 JS 文件头上使用它。