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

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（平板电脑）的设备无济于事。

头部的screen.width的检测也​​无济于事，因为如果android之前未宣布元视口，则androids会返回错误的宽度。

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

Answer 1

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

在标题部分，您可以添加：

<meta name =“ viewport” content =“ width = device-width”>

在css中，您应该执行此操作，以便它可以检测屏幕的大小，并根据您设计的宽度（大于640像素）做出响应（更改）。

@media屏幕和（最小宽度：640px）{

//一些代码

}

这个网站可以帮助您学习自适应网页设计http://www.sitepoint.com/build-a-sensitive-mobile-friendly-website-from-scratch-dive-into-the-code/