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

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


当前回答

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

其他回答

用于动态检测尺寸

你可以这样做在本地,没有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 '); });

这是我做的方式,我在IE 8 -> 10, FF 35, Chrome 40中尝试过,它将在所有现代浏览器(作为窗口)中工作得非常流畅。innerWidth是定义的),在IE 8(没有window.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)
  );
}

jQuery维函数

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

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

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

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

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

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