如何在JavaScript中获得准确的屏幕高度和宽度?

时间:2016-07-07 07:32:29

标签: javascript

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

感谢那些愿意帮助我的人。 :)

2 个答案:

答案 0 :(得分:0)

最好使用Map<String, List<String>> map = new HashMap<String, ArrayList<String>>(); // Create your list List<String> list8004 = new ArrayList<String>(); list8004.add("Lead"); list8004.add("Opportunity"); list8004.add("Quote"); list8004.add("Contract"); map.put("8004", list8004); // Then do the same for 8005 List<String> list8005 = new ArrayList<String>(); list8005.add("CreatContract"); list8005.add("ManageContract"); list8005.add("SelectContract"); map.put("8005", list8004); // Finally access Iterator<Entry<String, List<String>>> it = map.entrySet().iterator(); while(it.hasNext()){ Map.Entry pair = (Map.Entry)it.next(); System.out.print(pair.getKey() + " = "); for (String s : pair.getValue()){ System.out.print(s + " "); } System.out.println(); } window.innerHeight。 innerHeight和innerWidth属性捕获浏览器窗口的维度。这是css媒体查询用于执行响应式布局的内容。您还可以使用window.innerWidthwindow.outerWidth。内部和外部之间的差异是客户端浏览器添加到窗口的边距,填充和浏览器内容。

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

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

答案 1 :(得分:0)

window.innerWidthwindow.innerHeightwindow.outerWidthwindow.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());