首先呢，我们将iPhone手机的相关数据表示如下

我们要理解很多东西，比如逻辑分辨率、物理分辨率、缩放因子、ppi等，这里先不讨论。

首先呢，我们先介绍下各个屏幕宽度：

网页可见区域宽： 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

屏幕缩放因子：window.devicePixelRatio

屏幕逻辑分辨率：window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)

下面，我将分别在不同设备上的演示后的结果截图如下：

iPhone5

iPhone6

iPad

PC

那么大家根据这些，多理解理解这些数据。

我们在移动端开发时，在<head>标签中加入

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这句话帮我们解决了很多问题，我们只要按照设备物理像素的大小来进行开发就行了。

js获取浏览器和设备相关width（屏幕的宽度）的更多相关文章

  1. js获取浏览器和设备的 width和height，

    获取宽高参考: 方法: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  2. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  3. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  4. js获取浏览器类型和版本信息

    bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...

  5. js获取浏览器信息及版本（兼容IE）

    获取浏览器信息方法有很多种,但是要是兼容ie旧版本就有点麻烦了,因为很多方法在旧版本ie是不支持的,所以ie我做了单独处理,但是目前还有小问题,就是想显示QQ浏览器,搜狗浏览器..这样的,这样还实现不 ...

  6. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  7. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  8. js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  9. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

随机推荐

  1. Linux - DNF包管理

    简介 link DNF(Dandified Yum)是新一代的RPM软件包管理器. DNF包管理器克服了YUM包管理器的一些瓶颈,提升了包括用户体验,内存占用,依赖分析,运行速度等多方面的内容. DN ...

  2. 【sping揭秘】5、IOC容器（一）

    OC容器实现过程 1. 容器启动阶段,读取配置文件,解析文件BeanDefinitionReader 2. Bean 实例化阶段 关于BeanFactoryPostProcessor 插手spring ...

  3. asp.net core中遇到需要自定义数据包解密方法的时候

    最近将公司的项目用.netcore重写, 服务的http外部接口部分收发消息是DES加解密的, 那么在asp.net core mvc的action处理之前需要加入解密这个步骤. 我第一想到的是用fi ...

  4. VS 插件 Productivity Power Tools - 更改 选项卡组件位置

    Visual Studio 2013怎么把选项卡设置在左侧显示?vs中选项卡默认显示在顶部,但是更习惯显示在左侧,该怎么设置呢?为了更方便使用,下面分享VS2013选项卡设置在左侧显示的图文教程 Vi ...

  5. android开发学习——day1

    了解安卓系统架构:Linux内核层,系统运行层库,应用框架层,应用层 版本信息 android开发的特色之处就在于强大的组件功能 开发环境android stdio 2.0安装:把安装的组件都勾选上, ...

  6. （转载）Centos下Elasticsearch安装详细教程

    原文地址:http://www.cnblogs.com/sunny1009/articles/7874251.html Centos下Elasticsearch安装详细教程 1.Elasticsear ...

  7. Facade外观模式(结构性模式)

    1.系统的复杂度 需求:开发一个坦克模拟系统用于模拟坦克车在各种作战环境中的行为,其中坦克系统由引擎.控制器.车轮等各子系统构成.然后由对应的子系统调用. 常规的设计如下: #region 坦克系统组 ...

  8. Collection articles on stackoverflow

    What does “WHERE 1” mean in SQL? http://stackoverflow.com/questions/3720735/what-does-where-1-mean-i ...

  9. PLSQL Developer概念学习系列之登录连接Oracle时出现（没有登录） -PL / SQL Developer：ORA - 12541： TNS ：无建听程序的错误解决办法（图文详解）

    不多说,直接上干货! 前期博客 PLSQL Developer概念学习系列之如何正确登录连接上Oracle(图文详解)   如用scott.scott_password进行登录,orcl是全局数据库 ...

  10. j2ee高级开发技术课程第七周

    来源:https://baike.baidu.com/item/JSON/2462549?fr=aladdin JSON(JavaScript Object Notation, JS 对象标记) 是一 ...