如何获得浏览器视口尺寸?

我想让我的访问者能够看到高质量的图像，有什么方法可以检测窗口的大小吗?

或者更好的是，JavaScript浏览器的视口大小?见此处绿色区域:

当前回答

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

2009-08-08 06:39:12

其他回答

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

2012-12-31 08:01:04

我找到了一个跨浏览器的方法:

2014-05-30 09:07:01

jQuery维函数

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

2009-08-08 06:01:22

我知道这是一个可接受的答案，但我遇到了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);

2013-08-12 19:12:47

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

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

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

https://usehooks.com/useWindowSize/

2020-09-11 16:36:44

如何获得浏览器视口尺寸?

推荐文章

最新文章

标签