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

Question

我有一个网站，其固定宽度为 1024px，并且以桌面为中心。在移动设备上，宽度应与 phone 或平板电脑的大小相匹配。

使用设备宽度时，像这样

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

我得到以下结果：

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

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

我所期待的和我真正想要的是这样的：

问题：如何让设备准确地适应屏幕上的网站？

Answer 1

从元标记中删除比例因子后得到了什么？还有一个问题：您是否希望用户缩放（缩放）页面？我会努力的：

    <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" />

Answer 2

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

@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-500 像素的设备，运行第二个 CSS 代码。
对于宽度为 500-1600 像素的设备，运行第一个 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;
    }
}

我之前问过类似的问题。你可以看看.

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

Handling device-width on a fixed-width website

html

mobile

mobile-website

device-width