您可以简单地使用JavaScript window.matchMedia()方法根据CSS媒体查询检测移动设备。这是检测移动设备的最佳和最可靠的方法。

下面的例子将告诉你这个方法是如何工作的:

<script>
$(document).ready(function(){
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide
        alert("This is a mobile device.");
    } else{
        // The viewport is at least 768 pixels wide
        alert("This is a tablet or desktop.");
    }
});
</script>

窗户和窗户是有区别的。innerHeight和document.documentElement.clientHeight。第一个包括水平滚动条的高度。

我知道这是一个可接受的答案，但我遇到了clientWidth不能工作的情况，因为iPhone(至少我的)返回980，而不是320，所以我使用window.screen.width。我在现有的网站上工作，需要“响应式”，需要强制较大的浏览器使用不同的元视口。

希望这能帮助到一些人，它可能不完美，但在我的iOs和Android测试中是有效的。

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);

跨浏览器@media (width)和@media (height)值

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

窗口。innerWidth和window.innerHeight

获取包含滚动条的CSS viewport @media (width)和@media (height) initial-scale和缩放变化可能会导致移动值错误地缩小到PPK所称的可视视口，并且小于@media值 由于本机舍入，缩放可能导致值相差1px IE8-未定义

document.documentElement.clientWidth和.clientHeight

等于CSS视口宽度减去滚动条宽度 当没有滚动条时，匹配@media (width)和@media (height) 与jQuery(window).width()相同，jQuery调用浏览器视口 提供跨浏览器 如果缺少doctype则不准确

资源

各种维度的实时输出 Verge使用跨浏览器视口技术 实际使用matchMedia来获得任何单位的精确尺寸

符合W3C标准的解决方案是创建一个透明的div(例如使用JavaScript动态创建)，将其宽度和高度设置为100vw/100vh (Viewport单位)，然后获取其offsetWidth和offsetHeight。之后，可以再次删除该元素。这在较旧的浏览器中行不通，因为视口单元相对较新，但如果你不关心它们，而是关心(即将到来的)标准，你肯定可以这样做:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

当然，你也可以设置objNode.style.position = "fixed"，然后使用100%作为宽度/高度——这应该有同样的效果，并在一定程度上提高兼容性。另外，一般来说，将位置设置为固定可能是一个好主意，因为否则div将是不可见的，但会消耗一些空间，这将导致出现滚动条等。

此代码来自http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

注意:要读取宽度，使用console.log('viewport width'+viewport().width);