首先呢，我们将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. IIS 301重定向 报错 地址后面有eurl.axd

    错误发生的原因是当ASP.NET检测到Web站点配置为使用ASP.NET 4.0,本地ASP.NET 4.0 的组件会传递一个不能扩展的 URL到ASP.NET的管理程序作进一步处理.但是,如果一个低 ...

  2. How to resize or create a thumbnail image from file stream on UWP

    最近在搞Ocr相关的windows universal app, 用到了一些图像处理相关的知识. 涉及到了BitmapDecoder/BitmapEncoder/IRandomAccessStream ...

  3. centos 7 Mysql5.7 主从复制配置

    1.环境 Centos 7 Mysql 5.7 Master  192.168.1.71 Slave01 192.168.1.72 2.分别配置master,slave01 # vi /etc/my. ...

  4. Google Chrome Native Messaging开发实录（二）Chrome Extension扩展

    接上一篇<Google Chrome Native Messaging开发实录(一)背景介绍>的项目背景,话不多说,有关Chrome Extension介绍和文档就不展开了,直接上代码. ...

  5. tomcat 调优-生产环境必备

    目录 1. tomcat 启动慢 1.1 tomcat 获取随机值阻塞 1.2 tomcat 需要部署的web应用程序太多 1.3 tomcat启动内存不足 2 Connector 调优 2.2 Co ...

  6. JS中this的那些事儿

    this是JavaScript中最复杂的机制之一.它是一个很特别的关键字,被自动定义在所有函数的作用域中. 一.this到底指向什么? this既不指向函数自身,也不指向函数的词法作用域,具体指向什么 ...

  7. spring boot实现ssm(2)功能

    spring 和 mybatis 整合的那篇: ssm(2) . 配置文件比ssm(1) 更多, 在做项目的时候, 配置文件是一个让人头大的事情. 那么在spring boot中, 实现相同功能, 需 ...

  8. Entity Framework 6.x - 创建模型来自于现有数据库

    Creating a Model from an Existing Database 一.创建数据库 Chapter2 USE master GO CREATE DATABASE Chapter2 G ...

  9. 微信小程序开发语言的选择

    微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...

  10. SQL PKG示例

    CREATE OR REPLACE PACKAGE PKG_SYS_LOG IS -- Author : Li Cong -- Created : 2009-10-12 -- Purpose : 存放 ...