在固定宽度的网站上处理设备宽度

Question

我的网站固定宽度 1024px ，并以桌面为中心。在移动设备上，宽度应与手机或平板电脑的尺寸相匹配。

使用设备宽度时，像这样

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

我得到以下结果：

我使用width=1024得到相同的结果。

...这真的令人困惑，因为用户无法收集概述。我不知道为什么device-width将网站的视口设置为此特定大小。我不希望这样。

我期待的和我真正想要的是：

问题：如何告诉设备完全适合屏幕上的网站？

Answer 1

为了使网站具有适应性和响应性，我建议使用

@media screen and (max-width: the max width you want){ }

你也可以在你的。这将使初始比例为1，并允许一些缩放为3。

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

您还需要在换行元素上使用％而不是像素。这样它就会根据你的屏幕进行调整。

以下是一个例子：

• 对于宽度为0-500px的设备，请运行第二个CSS代码。
• 对于宽度为500-1600px的设备，请运行第一个CSS代码。

您还可以使用以下方法指定视网膜：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){ }

这是另一个例子：

/** From 500 - 1600px width **/
@media screen and (max-width: 1600px){
    body {
        background-color: #fff;
    }
}
/** From 0 - 500px width **/
@media screen and (max-width: 500px){
    body {
        background-color: #000;
    }
}

我之前问过类似的问题。您可以查看here。

Answer 2

从元标记中删除比例因子时得到了什么？还有一个问题：您是否希望用户缩放（缩放）页面？我会更好地尝试：

    <meta name="viewport" content="width=device-width" />

还有：

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

对于拟合高度和宽度，您可以使用这些元：

  <meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />