Question

我正在做一个网站，它应该在屏幕上扩展，宽度超过640（桌面和平板电脑），并在640以下的设备上显示为移动版本（智能手机）。

因此我需要智能手机的meta [name = viewport]，而其他设备则不需要它。

目前正在使用头像这样的代码

<script>
        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {
            document.write("<meta content='width=device-width, initial-scale=1' name='viewport'>");
        }
</script>

但是除去宽度超过640（平板电脑）的设备并没有帮助。

检测head.width中的head也无济于事，因为如果之前没有宣布meta视口，则androids会返回不正确的宽度。

有人知道，如何检测头部中的药片或达到我想要的效果。

Answer 1

您想要实现的是我认为一个响应式网站，因此您需要css媒体查询：

在头部分，您可以添加：

＆LT; meta name =＆＃34; viewport＆＃34;含量=＆＃34;宽度=设备宽度＆＃34; ＆GT;

在你的css中，你应该这样做，以便它能够检测到屏幕的大小，它会响应（改变），具体取决于你的设计宽度超过640像素。

@media screen and（min-width：640px）{

//这里有一些代码

}

此网站可以帮助您学习响应式网页设计http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/

meta视口仅适用于移动设备（屏幕宽度小于640）

1 个答案: