css - 不同设备的响应站点视口(viewport)问题

Question

我创建了一个响应式模板，但遇到以下问题。

我为小于 480 像素的桌面分辨率和小于 540 像素的手机分辨率创建了一个媒体查询。在台式机上它工作正常，在手机上它按预期工作。

@media only screen and (max-device-width: 540px),
screen and (max-width: 480px) {

因此，每当我在平板电脑上打开网站时，我都会加载桌面版本(如预期的那样)，但结果会放大。

如果我使用以下代码，最大比例为 0.6

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=0.6">

我正确地获得了平板电脑 View ，但随后在手机中它被缩小了。

为了完成这项工作，我到处搜索并尝试了每一种组合。据我所知，我希望 maximum-scale=1 用于手机，0.6 用于平板电脑。如何实现？

提前感谢您的宝贵时间。希望可以实现。

编辑:删除网址。

Answer 1

那是因为最大比例设置为 0.6。这意味着该网站显示为 60%。尝试将其保留或将其设置为 1.0