用javascript 怎样才能很好的获取手机的屏幕宽度和高度

JavaScript016

用javascript 怎样才能很好的获取手机的屏幕宽度和高度,第1张

一般来说在移动浏览器上是拿不到屏幕真实分辨率的,因为页面渲染是在一个叫viewport的页面绘制区域内(说的通俗点就是手机浏览器是用一个虚拟的屏幕来显示网页的)。viewport和屏幕的真实尺寸并不是对应的,如在Safari Mobile中viewport默认宽度(320px)是屏幕真实尺寸(640px)的一半,这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例,如initial-scale=.5就可以让viewport和屏幕一致的尺寸,但这个比例在不同的手机上并不一定是2倍关系,特别是Android手机,在大屏手机(5寸以上)上这个值是3倍甚至4倍。而且改变viewport比例后可能会导致后续制作中出现一系列问题。所以我认为不要纠结一定要拿到屏幕真实尺寸,就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。

有一个非常曲线的解决办法,就是:css的媒体查询(@media)是能够检测屏幕尺寸(其实是浏览器窗体的真实尺寸,并不是屏幕的真实物理尺寸,介意的朋友就不要看了)的,通过它来给网页内的某个元素设置一个特殊的属性,然后再用JavaScript来获取这个属性值。当然这样只能获得一个阶梯值(比如480px到540px之间、540px到600px之间等等),不是精确值,所以可能得不偿失,因此我是不推荐的。

Javascript:

网页可见区域宽:

document.body.clientWidth

网页可见区域高:

document.body.clientHeight

网页可见区域宽:

document.body.offsetWidth

(包括边线的宽)

网页可见区域高:

document.body.offsetHeight

(包括边线的高)

网页正文全文宽:

document.body.scrollWidth

网页正文全文高:

document.body.scrollHeight

网页被卷去的高:

document.body.scrollTop

网页被卷去的左:

document.body.scrollLeft

网页正文部分上:

window.screenTop

网页正文部分左:

window.screenLeft

屏幕分辨率的高:

window.screen.height

屏幕分辨率的宽:

window.screen.width

屏幕可用工作区高度:

window.screen.availHeight

屏幕可用工作区宽度:

window.screen.availWidth

JQuery:

$(document).ready(function(){

alert($(window).height())

//浏览器当前窗口可视区域高度

alert($(document).height())

//浏览器当前窗口文档的高度

alert($(document.body).height())//浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true))//浏览器当前窗口文档body的总高度

包括border

padding

margin

alert($(window).width())

//浏览器当前窗口可视区域宽度

alert($(document).width())//浏览器当前窗口文档对象宽度

alert($(document.body).width())//浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true))//浏览器当前窗口文档body的总宽度

包括border

padding

margin

})

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

document.documentElement.clientWidthdocument.documentElement.clientHeight

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

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