如何在JavaScript中获取准确的屏幕高度和宽度？

Question

如何在JavaScript中获取准确的屏幕高度和宽度？

3

我尝试了几个JavaScript函数，但是它们对我不起作用。我正在构建一个移动响应式网站，其中一些函数给出了不同的结果。

这是我使用的函数。

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    swidth = screen.width,
    sheight = screen.height;

浏览器目标：UC浏览器，Opera Mini，Chrome，Firefox。注意：我在这个项目中没有使用jQuery。

提前感谢那些会帮助我的人。:)

- user6302777

1

操作系统的Chrome（滚动条、任务栏等）以及浏览器本身的Chrome会将窗口可用空间从屏幕提供的空间中减去。http://www.quirksmode.org/dom/w3c_cssom.html#screenview - flowtron

2个回答

1

window.innerWidth，window.innerHeight，window.outerWidth，window.outerHeight可以为您提供视口屏幕的正确外部和内部高度和宽度，并且在响应式设计方面可以使用这些属性。但是，如果您计划进行响应式网站，则最好使用媒体查询或基于bootstrap的网站。如果使用JavaScript，请使用window.innerWidth+innerHeight属性。

document.documentElement.clientWidth + document.documentElement.clientHeight 可以为您提供<html>标签的高度和宽度

document.body.clientWidth + document.body.clientHeight 可以为您提供<body>标签的高度和宽度

function ld(){
var a = window.innerWidth;
var b = window.innerHeight;
var c = window.outerWidth;
var d = window.outerHeight;
console.log("innerWidth = " +a +" " +"innerHeight = " +b +" "+"outerWidth = " +c +" " +"outerHeight = " +d );
}
window.addEventListener("load",ld());

- frnt

1

我正在使用媒体查询。虽然它很好，但在开发Opera mini和UC浏览器时，某些元素属性将无法正常工作。这就是为什么我使用userAgent来检测浏览器并在给定元素上应用一些回退属性的原因。CSS的Viewport Height在某些浏览器上无法正常工作。在某些移动浏览器中开发网站非常困难，因为它们提供了速度模式。所以我应该在速度模式下制作网站。这样它会正确地渲染。 - user6302777

1

我在使用WordPress开发网站时也遇到了这个问题，部分浏览器支持存在问题。你可以查看这个链接 https://dev59.com/yIvda4cB1Zd3GeqPgv7p 获取帮助。 - frnt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- b4oshany · Accepted Answer

最好使用 window.innerHeight 和 window.innerWidth。innerHeight 和 innerWidth 属性捕获浏览器窗口的尺寸。这是 css 媒体查询用于响应式布局的基础。您还可以使用 window.outerWidth 和 window.outerHeight。内部和外部之间的差异是客户端浏览器添加到窗口的边距、填充和浏览器内容。

屏幕对象的宽度和高度属性捕获客户端计算机的屏幕分辨率。这绝不是您想要的，特别是在客户端将您的网站拆分视图的情况下。clientWidth 和 clientHeight 表示当前浏览器视图中文档的总体大小。同样，这绝不是您想创建响应式设计的方式。

但是，请查看 this 以获取更多说明和使用 JavaScript 中媒体查询的简洁方法。否则，请尝试 w3schools示例内部宽度。