好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

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

我是做移动端html5 web开发的,为了得到个手机宽高折腾了不少,度娘谷歌出来基本都不对,一般情况下没事,但项目上线会出问题,小部分手机获取到的宽高并不正确。比如上面说的screen.width screen.height这些数据在有的手机上并不准确,比如三星的某些型号(具体型号,当时测的,现在忘了)。 一般来说在移动浏览器上是拿不到屏幕真实分辨率的,因为页面渲染是在一个叫viewport的页面绘制区域内。viewport和屏幕的真实尺寸并不是对应的,如在Safari Mobile中viewport默认宽度(320px)是屏幕真实尺寸(640px)的一半,这里不管是用window.innerHeight还是window.screen.width拿到的都是320px。当然我们可以通过meta设置改变viewport的比例,如initial-scale=.5就可以让viewport和屏幕一致的尺寸,这个比例在不同的手机上并不一定是2倍关系,特别是Android手机。而且改变viewport比例后可能会导致后续制作中出现一系列问题。

另外Android系统中可以在viewport设置target-densitydpi=device-dpi让viewport的尺寸和屏幕真实尺寸保持一致,但iOS不起作用,所以这个方法不具有普遍性。

所以我认为不要纠结一定要拿到屏幕真实尺寸,就把viewport的尺寸当成屏幕的尺寸进行页面设计和制作肯定是没有问题的。


给一个viewport设置的示例:

    
   
   
        name=  "viewport"   content=  "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"  /> 
       Document   
   
  
   
   
  

window.innerHeight属性,window.innerWidth属性

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素。很显然,当>用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。
注意,这两个属性值包括滚动条的高度和宽度。


screen对象

screen对象包含了显示设备的信息。

screen.height:显示设备的高度,单位为像素。 screen.width:显示设备的宽度,单位为像素。

以上两个属性,除非调整显示设备的分辨率,否则看作是常量,不会发生变化。

下面是根据屏幕分辨率,将用户导向不同网页的代码。

  if   ((  screen  .  width    800  )   &&   (  screen  .  height    600  ))   { 
     window  .  location  .  replace  (  'small.html'  ); 
 }   else   { 
     window  .  location  .  replace  (  'wide.html'  ); 
 } 
  

查看更多关于怎样用JavaScript准确获取手机屏幕的宽度和高度?的详细内容...

  阅读:42次

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]