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

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

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

当前回答

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

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

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

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

2014-05-13 17:12:30

其他回答

您可以简单地使用JavaScript window.matchMedia()方法根据CSS媒体查询检测移动设备。这是检测移动设备的最佳和最可靠的方法。

下面的例子将告诉你这个方法是如何工作的:

<script>
$(document).ready(function(){
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide
        alert("This is a mobile device.");
    } else{
        // The viewport is at least 768 pixels wide
        alert("This is a tablet or desktop.");
    }
});
</script>

2021-05-15 06:38:15

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

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

2014-05-30 09:07:01

jQuery维函数

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

2009-08-08 06:01:22

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

窗口。innerWidth和window.innerHeight

获取包含滚动条的CSS viewport @media (width)和@media (height) initial-scale和缩放变化可能会导致移动值错误地缩小到PPK所称的可视视口，并且小于@media值由于本机舍入，缩放可能导致值相差1px IE8-未定义

document.documentElement.clientWidth和.clientHeight

等于CSS视口宽度减去滚动条宽度当没有滚动条时，匹配@media (width)和@media (height) 与jQuery(window).width()相同，jQuery调用浏览器视口提供跨浏览器如果缺少doctype则不准确

资源

各种维度的实时输出 Verge使用跨浏览器视口技术实际使用matchMedia来获得任何单位的精确尺寸

2012-01-16 05:23:11

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

推荐文章

最新文章

标签