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

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

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

当前回答

如果你正在使用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

其他回答

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

2014-05-30 09:07:01

你可以使用窗口。addEventListener('resize'，你的函数); 当窗口调整大小时，它将运行你的函数。当你使用window的时候。innerWidth或document.documentElement.clientWidth它是只读的。你可以在你的函数中使用if语句，使它更好。

2020-10-28 19:35:09

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

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

2009-08-08 06:39:12

应该是这样

let vw = document.documentElement.clientWidth;
let vh = document.documentElement.clientHeight;

理解viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

上面链接的简写:viewport.moz.one

我已经建立了一个用于设备测试的网站:https://vp.moz.one

2022-02-07 17:01:49

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

推荐文章

最新文章

标签