
做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。
alert($(window)height()); //浏览器当前窗口可视区域高度
alert($(document)height()); //浏览器当前窗口文档的高度
alert($(documentbody)height());//浏览器当前窗口文档body的高度
alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window)width()); //浏览器当前窗口可视区域宽度
alert($(document)width());//浏览器当前窗口文档对象宽度
alert($(documentbody)width());//浏览器当前窗口文档body的高度
alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
// 获取页面的高度、宽度
function getPageSize() {
var xScroll, yScroll;
if (windowinnerHeight && windowscrollMaxY) {
xScroll = windowinnerWidth + windowscrollMaxX;
yScroll = windowinnerHeight + windowscrollMaxY;
} else {
if (documentbodyscrollHeight > documentbodyoffsetHeight) { // all but Explorer Mac
xScroll = documentbodyscrollWidth;
yScroll = documentbodyscrollHeight;
} else { // Explorer Macwould also work in Explorer 6 Strict, Mozilla and Safari
xScroll = documentbodyoffsetWidth;
yScroll = documentbodyoffsetHeight;
}
}
var windowWidth, windowHeight;
if (selfinnerHeight) { // all except Explorer
if (documentdocumentElementclientWidth) {
windowWidth = documentdocumentElementclientWidth;
} else {
windowWidth = selfinnerWidth;
}
windowHeight = selfinnerHeight;
} else {
if (documentdocumentElement && documentdocumentElementclientHeight) { // Explorer 6 Strict Mode
windowWidth = documentdocumentElementclientWidth;
windowHeight = documentdocumentElementclientHeight;
} else {
if (documentbody) { // other Explorers
windowWidth = documentbodyclientWidth;
windowHeight = documentbodyclientHeight;
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
// 滚动条
documentbodyscrollTop;
$(document)scrollTop();
有两种
1通过设置viewport参数
2使用css3中的缩放
两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题。
<</span>meta name=“viewport” content=“width=device-width, initial-scale=10, minimum-scale=05, maximum-scale=20, user-scalable=yes” />
在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=10:表示初始的缩放比例
minimum-scale=05:表示最小的缩放比例
maximum-scale=20:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
>
1通过设置viewport参数
2使用css3中的缩放
两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题。
<</span>meta name=“viewport” content=“width=device-width, initial-scale=10, minimum-scale=05, maximum-scale=20, user-scalable=yes” />
在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。
windowaddEventListener("orientationchange", function(){
alert('得到的是旋转之前DIV的高和宽')
setTimeout(function () { alert('延时一秒后得到的是旋转之后DIV的高和宽') }, 1000);
})
我是这样解决的,延时一秒后可以得到旋转之后的高和宽,但我总感觉这方法不太好 万一是性能不好的设备 一秒过后还没完成相应的设置 此方法就无效了,题主你是用什么方法解决的?
PHP是无法获取屏幕的高度和宽度的,你可以用JS来获取
Javascript:
网页可见区域宽: documentbodyclientWidth
网页可见区域高:
documentbodyclientHeight
网页可见区域宽: documentbodyoffsetWidth
(包括边线的宽)
网页可见区域高: documentbodyoffsetHeight (包括边线的高)
网页正文全文宽:
documentbodyscrollWidth
网页正文全文高: documentbodyscrollHeight
网页被卷去的高:
documentbodyscrollTop
网页被卷去的左: documentbodyscrollLeft
网页正文部分上:
windowscreenTop
网页正文部分左: windowscreenLeft
屏幕分辨率的高:
windowscreenheight
屏幕分辨率的宽: windowscreenwidth
屏幕可用工作区高度:
windowscreenavailHeight
屏幕可用工作区宽度: windowscreenavailWidth
JQuery:
$(document)ready(function(){alert($(window)height()); //浏览器当前窗口可视区域高度
alert($(document)height()); //浏览器当前窗口文档的高度
alert($(documentbody)height());//浏览器当前窗口文档body的高度
alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window)width()); //浏览器当前窗口可视区域宽度
alert($(document)width());//浏览器当前窗口文档对象宽度
alert($(documentbody)width());//浏览器当前窗口文档body的宽度
alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
以上就是关于怎么样获取屏幕的高度 jquery全部的内容,包括:怎么样获取屏幕的高度 jquery、html5里面怎样自动适应手机屏幕的高度、请教各位高手一个android开发的关于如何获取准确的屏幕宽度和高度的问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)