1

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

使用设备宽度时，像这样

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

我得到以下结果：

设备宽度

我使用width=1024.

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

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

期望

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

4

2 回答 2

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-500px 宽度的设备，运行第二个 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;
    }
}

我之前问过一个类似的问题。你可以在这里查看。

于 2015-03-26T12:14:04.173 回答
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" />
于 2015-03-26T12:13:10.117 回答