javascript获取浏览器视口宽高

javascript获取浏览器视口宽高,第1张

//js部分

$(document)ready(function() {

$("#button")click(function() {

alert("高:"+$(document)height()+" 宽:"+$(document)width());

});

});<!-- html 部分 -->

<button id="button">点击显示</button>

你真确定不好使?检查一下jquery路径吧。

var win_w = $(window)width();//获取宽度

var win_h = $(window)height();//获取高度

如果你想要匹配高度,那么,就是页面刚刚打开其实没有数据,是等页面打开,计算了屏幕高度之后,再根据每条数据的高度计算出条数,再利用ajax的异步传输去读取列表,然后用JS呈现在手机网页中的。

要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后):

1、outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。

2、outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。

3、innerheight 返回窗口的文档显示区的高度。

4、innerwidth 返回窗口的文档显示区的宽度。

补充:

在浏览器兼容方面:

1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。

注意:IE 8 及更早 IE 版本不支持该属性。

2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。

注意:IE 8 及更早 IE版本不支持这两个属性。

获取代码:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"

<head>

<title>请调整浏览器窗口</title> <meta >

js获取浏览器可见区域(不包括标题栏、地址栏、收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度

宽度:documentdocumentElementclientWidth

高度:documentdocumentElementclientHeight

文档类型:XHTML10

浏览器:ALL

用 JavaScript 准确获取手机屏幕的宽度和高度

documentdocumentElementclientWidth; documentdocumentElementclientHeight;

这个得到的是设备像素可见宽高,比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64), iPhone 5里为320504

小部分手机获取到的宽高并不正确。比如上面说的screenwidth screenheight这些数据在有的手机上并不准确

</head>

<p id="p1">sssss</p>

<body>

</body>

</html>

<script>

var x = navigator;

var w=windowinnerWidth

|| documentdocumentElementclientWidth

|| documentbodyclientWidth;

var h=windowinnerHeight

|| documentdocumentElementclientHeight

|| documentbodyclientHeight;

documentgetElementById("p1")innerHTML="<b>屏幕分辨率:</b>"+screenwidth + "" + screenheight+"<b>内部窗口</b>:" + w + "" + h

</script>

不知道是不是这个 屏幕分辨率 :pc上的桌面分辨率 。手机上是 一个型号固定的分辨

以上就是关于javascript获取浏览器视口宽高全部的内容,包括:javascript获取浏览器视口宽高、js如何根据不同屏幕的大小,获得页面高度,自动调整列表高度、js 如何获得浏览器的高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9619638.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存