首先呢，我们将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. POJ 2521

    #include <iostream> #include <stdio.h> using namespace std; int main() { //freopen(" ...

  2. 通过超链接启动App

    问题:微信里分享一个链接给你,你点击这个链接,一.如果你安装了这个钱包,那就直接打开钱包.二.如果没有安装钱包就跳转到下载钱包的地方 要点:首先要让浏览器知道 app 是谁,然后再让浏览器调用app ...

  3. expr命令总结

    expr在linux中是一个功能非常强大的命令.通过学习做一个小小的总结.1.计算字符串的长度.我们可以用awk中的length(s)进行计算.我们也可以用echo中的echo ${#string}进 ...

  4. CDH 版本子节点启动问题

    今天下午整整为了启动一个节点瞎忙活一下午,惨痛的教训还是记录下来吧,毕竟付出了代价.事情原委,一个同事在一台机器上占用了大量内存训练CTR点击率模型,而这台机器上部署了分布式Hadoop的一个data ...

  5. 广度优先遍历-BFS、深度优先遍历-DFS

    广度优先遍历-BFS 广度优先遍历类似与二叉树的层序遍历算法,它的基本思想是:首先访问起始顶点v,接着由v出发,依次访问v的各个未访问的顶点w1 w2 w3....wn,然后再依次访问w1 w2 w3 ...

  6. dex内存提取

    转 http://blog.csdn.net/asmcvc/article/details/18216531 智能手机的普及将移动互联网的发展推到了一个让所有人都为之兴奋的高度,我想即使是以商业眼光见 ...

  7. Dubbo源码学习--优雅停机原理及在SpringBoot中遇到的问题

    Dubbo源码学习--优雅停机原理及在SpringBoot中遇到的问题 相关文章: Dubbo源码学习文章目录 前言 主要是前一阵子换了工作,第一个任务就是解决目前团队在 Dubbo 停机时产生的问题 ...

  8. Vue2.0-token权限处理

    token一种身份的验证,在大多数网站中,登录的时候都会携带token,去访问其他页面,token就想当于一种令牌.可以判断用户是否登录状态.本次页面是通过Element-ui搭建的登录界面 当用户登 ...

  9. Vue笔记：在项目中使用 SCSS

    背景概述 1. CSS预处理器 css预处理器定义了一种新的编程语言,编译后成正常的CSS文件.为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代 ...

  10. spring security的简单应用

    本文只包涵spring security配置部分,不是一个完整项目,不过可以任意添加到一个web项目中,不需要对原来的程序做任何修改 部分内容来源于网络,如有雷同,毫无意外 1.xml配置文件 < ...