元视窗仅适用于移动设备(屏幕宽度小于640)

meta viewport only for mobile (screen width less than 640)

本文关键字：屏幕 小于 适用于 移动      更新时间：2023-09-26

我正在做一个网站，它应该在屏幕上缩放宽度超过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的设备(平板电脑)。

屏幕检测。宽度在头部也没有帮助，因为android返回一个不正确的宽度，如果它没有宣布之前的元视窗。

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

你想要实现的是一个响应式网站，因此你需要css媒体查询:

在标题部分你可以添加:

& lt;Meta name="viewport" content="width=device-width">

在你的css中，你应该这样做，这样它就会检测屏幕的大小，它会根据你的设计响应(改变)宽度超过640像素。

@media screen and (min-width:640px){

//这里有一些代码

}

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

相关文章：