如何用JS动态获取浏览器的宽高

如何用JS动态获取浏览器的宽高,第1张

IE中: 
documentbodyclientWidth ==> BODY对象宽度 
documentbodyclientHeight ==> BODY对象高度 
documentdocumentElementclientWidth ==> 可见区域宽度 
documentdocumentElementclientHeight ==> 可见区域高度


FireFox中: 
documentbodyclientWidth ==> BODY对象宽度 
documentbodyclientHeight ==> BODY对象高度 
documentdocumentElementclientWidth ==> 可见区域宽度 
documentdocumentElementclientHeight ==> 可见区域高度


Opera中: 
documentbodyclientWidth ==> 可见区域宽度 
documentbodyclientHeight ==> 可见区域高度 
documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

没有定义W3C的标准,则 
IE为: 
documentdocumentElementclientWidth ==> 0 
documentdocumentElementclientHeight ==> 0 

FireFox为: 
documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 

Opera为: 
documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
网页可见区域宽: documentbodyclientWidth 
网页可见区域高: documentbodyclientHeight 
网页可见区域宽: documentbodyoffsetWidth (包括边线的宽) 
网页可见区域高: documentbodyoffsetHeight (包括边线的高) 
网页正文全文宽: documentbodyscrollWidth 
网页正文全文高: documentbodyscrollHeight 
网页被卷去的高: documentbodyscrollTop 
网页被卷去的左: documentbodyscrollLeft 
网页正文部分上: windowscreenTop 
网页正文部分左: windowscreenLeft 
屏幕分辨率的高: windowscreenheight 
屏幕分辨率的宽: windowscreenwidth 
屏幕可用工作区高度: windowscreenavailHeight 
屏幕可用工作区宽度: windowscreenavailWidth 
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
eventclientX 相对文档的水平座标 
eventclientY 相对文档的垂直座标 
eventoffsetX 相对容器的水平坐标 
eventoffsetY 相对容器的垂直坐标 
documentdocumentElementscrollTop 垂直方向滚动的值 
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量

示例:

var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数:获取尺寸 

    //获取窗口宽度 
    if (windowinnerWidth) 
        winWidth = windowinnerWidth; 
    else if ((documentbody) && (documentbodyclientWidth)) 
        winWidth = documentbodyclientWidth; 
    //获取窗口高度 
    if (windowinnerHeight) 
        winHeight = windowinnerHeight; 
    else if ((documentbody) && (documentbodyclientHeight)) 
        winHeight = documentbodyclientHeight; 
    //通过深入Document内部对body进行检测,获取窗口大小 
    if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth) 
    { 
        winHeight = documentdocumentElementclientHeight; 
        winWidth = documentdocumentElementclientWidth; 
    } 
    //结果输出至两个文本框 
    documentform1availHeightvalue= winHeight; 
    documentform1availWidthvalue= winWidth; 

findDimensions(); 
//调用函数,获取数值 
windowonresize=findDimensions;

Mathmax(documentdocumentElementscrollHeight, documentdocumentElementclientHeight) + "px";
一般是取clientHeight和scrollHeight的最大值
用他来取他们的最大值

精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">你可以参考下面这个函数,这个函数是获取完整页面尺寸的函数(即你说的浏览器能看到的区域,不包括被滚动条卷去的区域)
-----------------------------js代码---------------------------------------------------------
<script>
function GetPageSize(){
var xScroll, yScroll;
if (windowinnerHeight && windowscrollMaxY) {
xScroll = documentbodyscrollWidth;
yScroll = windowinnerHeight + windowscrollMaxY;
} else if (documentbodyscrollHeight > documentbodyoffsetHeight){
xScroll = documentbodyscrollWidth;
yScroll = documentbodyscrollHeight;
} else {
xScroll = documentbodyoffsetWidth;
yScroll = documentbodyoffsetHeight;
}
var windowWidth, windowHeight;
if (selfinnerHeight) {
windowWidth = selfinnerWidth;
windowHeight = selfinnerHeight;
} else if (documentdocumentElement && documentdocumentElementclientHeight) {
windowWidth = documentdocumentElementclientWidth;
windowHeight = documentdocumentElementclientHeight;
} else if (documentbody) {
windowWidth = documentbodyclientWidth;
windowHeight = documentbodyclientHeight;
}
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
alert(GetPageSize());
</script>

//js  兼容各浏览器
var h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;   //height
var w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;      //width

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

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


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

原文地址: http://outofmemory.cn/yw/12978227.html

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

发表评论

登录后才能评论

评论列表(0条)

保存