如何在javascript中获得准确的屏幕高度和宽度？答案

【问题标题】：How to get accurate screen height and width in javascript?如何在javascript中获得准确的屏幕高度和宽度？
【发布时间】：2016-07-07 16:16:10
【问题描述】：

我尝试了几个 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。

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

【问题讨论】：

OS chrome（滚动条、任务栏等）和浏览器本身的 chrome 会从屏幕提供的内容中削减窗口可用的内容。 quirksmode.org/dom/w3c_cssom.html#screenview

标签： javascript

【解决方案1】：

最好使用window.innerHeight 和window.innerWidth。 innerHeight 和 innerWidth 属性捕获浏览器窗口的尺寸。这就是 CSS 媒体查询用于响应式布局的方法。您也可以使用window.outerWidth 和window.outerHeight。内部和外部的区别在于客户端浏览器添加到窗口的边距、填充和浏览器内容。

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

但是，请查看this 以获得更多解释以及在 JavaScript 中使用媒体查询的简洁方法。否则，试试w3schools example of inner width

【讨论】：

【解决方案2】：

window.innerWidth,window.innerHeight,window.outerWidth,window.outerHeight 为您提供适当的视口屏幕的外部、内部高度和宽度，并且可以在进行响应式设计时使用它。但是，如果您正在计划响应式网站，则最好使用基于媒体查询或引导程序的网站。如果您使用的是 javascript，请使用 window.innerWidth+innerHeight 属性。

document.documentElement.clientWidth + document.documentElement.clientHeight 为您提供html tag <html> 的高度和宽度

document.body.clientWidth + document.body.clientHeight 为您提供body tag <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());

【讨论】：

我正在使用媒体查询。这很好，但是当您在 Opera mini 和 uc 浏览器中进行开发时。某些元素属性将不起作用。这就是为什么我使用 userAgent 来检测浏览器并在给定元素上应用一些后备属性。 css 的视口高度在某些浏览器上不起作用。在某些移动浏览器中开发网站非常困难，因为它们提供了速度模式。我应该让网站处于速度模式。这样它就会以任何一种方式正确渲染。
好吧，我在使用 wordpress 开发网站时也遇到了这个问题，并且浏览器方面存在一些部分支持问题。 stackoverflow.com/questions/30851085/…查看此链接将对您有所帮助。