zoukankan      html  css  js  c++  java
  • 获取屏幕宽高和浏览器宽高

    PC端

    屏幕分辨率的高: window.screen.height
    屏幕分辨率的宽: window.screen.width

    注解:电脑屏幕的分辨率(包括屏幕底部导航栏和浏览器顶部导航栏和滚动条)(通过改变电脑分辨率改变)

    屏幕可用区域的高: window.screen.availHeight
    屏幕可用区域的宽: window.screen.availWidth

    注解:电脑屏幕的分辨率(不包括屏幕底部导航栏和浏览器顶部导航栏以及滚动条)(通过改变电脑分辨率改变)

    浏览器可用区域的宽:(可通过缩放窗口改变)

    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;

    浏览器可用区域的高

    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

    最小值 chrome 1,IE 15, safari 67, firefox 57

    注解:除去浏览器导航栏和滚动条

    window.screen.height> window.screen.availWidth>h

    但移动端的情况大不一样!

    移动端:

    window.screen.height
    window.screen.width

    得出的是屏幕的物理分辨率,即实际存在的像素数目

    window.screen.availHeight
    window.screen.availWidth

    也是物理分辨率

    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

    得出的远远大于前两者!

    因为这是逻辑分辨率!

    注解:物理分辨率是屏幕上真实存在的像素相乘,逻辑分辨率是物理分辨率可以展示的分辨率!

    详情:http://blog.csdn.net/phunxm/article/details/42174937/

       以及 http://zhidao.baidu.com/link?url=xr0kV7IbRetzvfF1pcZQX34faTsqGk5aGlSWAfIs9kfoqbpi7IWddEGM4t6pBD33dGhCRNGhlmLwxj20SSak4a

  • 相关阅读:
    .net开发微信(1)——微信订阅号的配置
    工作中EF遇到的问题
    .net Entity Framework初识1
    Razor视图
    jquery中利用队列依次执行动画
    .net找List1和List2的差集
    angularjs ng-if 中的ng-model 值作用域问题
    Spring Boot + JPA(hibernate 5) 开发时,数据库表名大小写问题
    springboot 启动排除某些bean 的注入
    angularjs 初始化方法执行两次以及url定义错误导致传值错误问题
  • 原文地址:https://www.cnblogs.com/yanze/p/5978030.html
Copyright © 2011-2022 走看看