html - 使移动客户端的网页变薄

Question

不幸的是，手机的屏幕分辨率太高，以至于我的网站显得太小了。当在桌面浏览器上放大时，它可以完美适应，但不幸的是，在移动浏览器上，网页视口(viewport)大小在缩放后实际上并没有改变。为了尝试解决这个问题，我已经得到了一个脚本来检测移动用户代理，然后将 body 宽度设置为 500px，这看起来是完美的宽度，但不幸的是，即使在我设置了 meta 之后，移动浏览器也没有将其视口(viewport)设置为 500对于视口(viewport) 500，这会导致我的网页呈现在浏览器的一 Angular 。放大后看起来不错，但这不是我想要的。我的网站在某种程度上类似于 nokia.com，我希望它在移动客户端上以相同的方式运行。

谁能告诉我做这样的事情的正确步骤是什么，因为我绝不是一个合适的网络开发人员，我这样做只是为了学习。

这是我的元数据:

<meta name="viewport" content="width=500,initial-scale=1,maximum-scale=1,user-scalable=no">

Answer 1

您需要为较小的浏览器尺寸编写条件 CSS 规则。

一个例子: @media screen and (min-width: 768px) {
.item1{}
.item2{}
}

这是我刚刚通过快速谷歌搜索找到的一个网站，至少应该能让您入门。 http://www.conditional-css.com/usage

祝你学习顺利!