jQuery维函数

$(window).width()和$(window).height()

此代码来自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);

如果你正在使用React，那么在最新版本的React钩子中，你可以使用这个。

// Usage
function App() {
   const size = useWindowSize();

   return (
     <div>
       {size.width}px / {size.height}px
     </div>
   );
 }

https://usehooks.com/useWindowSize/

你可以用窗户。innerWidth和window。innerHeight属性。

如果您正在寻找非jquery解决方案，在移动设备上给出正确的虚拟像素值，并且您认为普通窗口。innerHeight或document.documentElement.clientHeight可以解决您的问题，请先研究这个链接:https://tripleodeon.com/assets/2011/12/table.html

开发人员已经做了很好的测试，揭示了这个问题:你可能会在Android/iOS、横向/纵向、正常/高密度显示中得到意想不到的值。

我目前的答案还不是silver bullet (//todo)，而是对那些打算从这个线程快速复制粘贴任何给定解决方案到生产代码的人的警告。

我在手机上寻找虚拟像素的页面宽度，我发现唯一的工作代码是window.outerWidth(出乎意料!)当我有时间的时候，我将检查这个表的正确解决方案，给出不包括导航栏的高度。

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