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

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

2014-05-30 09:07:01

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

2014-05-30 09:07:01

用于动态检测尺寸

你可以这样做在本地，没有Jquery或额外的

console.log('height默认值:'+window.visualViewport.height) console.log('width default:'+window.visualViewport.width) window.addEventListener(“调整”,(e) = > { console.log(' width: ${e.t target. visualviewport .width}px '); console.log(' height: ${e.t target. visualviewport .height}px '); })；

2021-10-11 18:18:26

jQuery维函数

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

2009-08-08 06:01:22

我在O'Reilly的《JavaScript: The definitive Guide》第6版中找到了一个明确的答案，第391页:

这个解决方案即使在Quirks模式下也能工作，而ryanve和ScottEvernden目前的解决方案则不能。

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

除了我想知道为什么行if (document.compatMode == "CSS1Compat")不是if (d.compatMode == "CSS1Compat")，一切看起来都很好。

2013-08-17 01:18:49

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

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

推荐文章

最新文章

标签