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

2020/09/20 16:01 · javascript ·  · 0评论

我想为访问者提供观看高质量图像的能力,有什么方法可以检测到窗口大小吗?

或者更好的是,使用JavaScript的浏览器的视口大小?在此处查看绿色区域:

跨浏览器 @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)

window.innerWidthwindow.innerHeight

  • 获取CSS视口 @media (width)@media (height)其中包括滚动条
  • initial-scale和缩放变化可能会导致移动值错误地缩小到PPK称为可视视口@media值,并且小于该
  • 缩放可能会由于本机舍入而导致值偏离1像素
  • undefined 在IE8-

document.documentElement.clientWidth.clientHeight


资源资源

jQuery维度函数

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

您可以使用window.innerWidthwindow.innerHeight属性。

内部高度与外部高度

如果您不使用jQuery,它将变得很丑陋。这是一个适用于所有新浏览器的代码段。在IE的Quirks模式和标准模式下,行为是不同的。这样就好了。

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;

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

我看了一下,发现了一种跨浏览器的方式:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

我可以在JavaScript中找到一个明确的答案:第6版,O'Reilly撰写的《权威指南》,第。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"),一切都看起来不错。

如果您正在寻找能够在mobile上以虚拟像素提供正确值的非jQuery解决方案,并且您认为普通解决方案window.innerHeightdocument.documentElement.clientHeight可以解决您的问题的方法,请先研究此链接:https : //tripleodeon.com/assets/2011/12/ table.html

开发人员已经进行了良好的测试,揭示了该问题:您可以为Android / iOS,风景/肖像,普通/高密度显示器获得意外的值。

我当前的答案还不是灵丹妙药(// todo),而是警告那些即将从该线程中将给定解决方案快速复制粘贴到生产代码中的人。

我一直在寻找移动设备上虚拟像素的页面宽度,但发现唯一有效的代码是(出乎意料!)window.outerWidth稍后,我将在有空的时候检查此表以获取正确的解决方案,以给出不包含导航栏的高度。

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

window.innerHeight之间有区别document.documentElement.clientHeight第一个包括水平滚动条的高度。

符合W3C标准的解决方案是创建一个透明的div(例如,使用JavaScript动态创建),将其宽度和高度设置为100vw / 100vh(视口单位),然后获取其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%作为宽度/高度-这应该具有相同的效果,并在一定程度上提高兼容性。同样,将位置设置为fixed可能通常是个好主意,因为否则div将是不可见的,但会占用一些空间,这将导致出现滚动条等。

这是我的方法,我在IE 8-> 10,FF 35,Chrome 40中尝试了它,它将在所有现代浏览器(定义window.innerWidth)和IE 8(无窗口)中都非常流畅。 innerWidth)以及任何问题(例如由于溢出而闪烁:“隐藏”)都可以顺利运行,请报告。我对视口高度并不是很感兴趣,因为我做了此功能只是为了解决一些响应工具,但是可以实现。希望能有所帮助,我感谢您的评论和建议。

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}

如果您使用的是React,则可以使用最新版本的react挂钩。

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

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

https://usehooks.com/useWindowSize/

本文地址:http://javascript.askforanswer.com/ruhehuodeliulanqishikouchicun.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!