概念：设备像素和CSS像素
 
设备像素可以通过 screen.width/height 获取
比如，iPhone 7 Plus 的设备宽度是414px；
 
如果一个元素设置了 width：128px，那么在一个宽为1024px的显示器中，你需要把屏幕放大八倍，就能让这个元素占满屏幕
但如果用户已经设置了缩放为200%，那么要适应屏幕就还需要放大四倍。
 
用户缩放（zoom）其实就是将像素伸展。元素的像素还是128px（CSS）；但实际的像素确实是原来的2倍了，因为放大之后它占用了256个设备像素。
也就是说，网页放大为200%的时候，一个CSS像素将占用4个设备像素的大小（2倍长2倍宽）。
 
 
100% zoom, CSS像素和设备像素重合↓
 
zoom out 缩小网页，一个设备像素与多个CSS像素重叠↓
 
zoom in 放大网页，效果相反，一个CSS像素与多个设备像素重叠↓
 
作为前端，一般只关注CSS像素，CSS才能决定元素的呈现方式。
但设备像素对用户来说是有用的，用户可以缩放网页到合适的大小。
 
100% zoom 的意思就是一个CSS像素对应一个设备像素。
电脑端通常都是100%适应的。
 
屏幕尺寸 Screen
 
screen.width/height 代表用户的屏幕大小，这个数值就是设备像素，是显示器的特性，是固定值。
这个数值对我们并不重要，除非你想统计这些数据。
 
窗口尺寸 Window
 
所以，我们需要了解的是浏览器窗口的尺寸，这个尺寸就是我们CSS布局可以占用的大小。
window.innerWidth/innerHeight可以获取这个数据。
而且这些数值是CSS像素值。如果用户放大了网页，就减少了可用空间，窗口尺寸也会缩小。
例如 我的浏览器在最大化的时候的window.innerWidth是1920；
当我200%放大的时候，数值就变为960了
滚动条也是窗口的一部分
 
滚动偏移 Scrolling offset
window.pageXOffset/pageYOffset 表示整个文档在水平和垂直方向的偏移，也是CSS像素值。
理论上讲，如果用户向上滚动并放大文档，这个偏移会变化。
然而浏览器会尽量保持可视区域的顶部元素一致，这个并不一定总是有效，但这表示实际上偏移量并没有改变：之前滚动到窗口外的那一部分，放大之后也还是那些。
 
概念：视口（viewport）
 
视口是用来约束<html>元素的。
理论上，html元素的宽度由viewport的宽度决定，并且是与viewport的宽度相等。
而viewport的宽度就是浏览器窗口的宽度（在桌面端），而在移动端这个就有点复杂了。
 
视口的这个特性就会有一些异样的事情发生了。
比如我们将原文的网页滚动到最顶端，放大到有一些内容超出窗口的时候，滑动水平的滚动条至右边， 就会发现顶端最右边的部分显示异常了。
这是因为蓝色的条的宽度是width：100%，相对于html标签，也就是viewport，也就等于浏览器窗口的宽度。
当我们放大网页内容的时候，视口就会比整个网页小一点，内容就会超过html元素本身，这个元素有默认属性overflo：visible，所以超出的部分仍然会显示出来。
但蓝色条的宽度和html元素的宽度保持一致
 
那么，实际上我们需要知道的是页面全部内容的宽度，目前位置没办法获取这个值（除非你去计算单独元素的宽度和外边距，但这样容易出错）。
我更愿意让蓝色条的宽度值100%基于文档的宽度，而不是html元素的宽度（这个应该比较复杂，如果说这是不可能实现的我也不会惊讶）
 
测量viewport
 
viewport的尺寸可以通过 document.documentElement.clientWidth/Height获取；
实际上，document.documentElement 就是 html 元素。但viewport是更高的一级，也可以说，视口包含着html元素。
 
你可以给html一个width属性（不推荐这么做，但这是能做到的）
在这种情况下，document.documentElement.clientWidth还是能得到视口的尺寸，但却不是html的尺寸。
 
两对属性
window.innerWidth/Height 难道不是视口的尺寸吗，是的，但又不是，因为它还包括了滚动条的尺寸。
关于这两对属性那就是历史遗留问题了。
那时候，Netscape只支持window.innerWidth/Height
IE只支持document.documentElement.clientWidth/Height
后来其他浏览器也支持clientWidth/Height了，但IE还不支持window.innerWidth/Height
 
这两对属性值对桌面端来说没什么影响，但在移动端则是个好东西。
 
测量<html>元素
 
clientWidth/Height 给出所有情况下的视口尺寸
而html元素本身的尺寸则通过document.documentElement.offsetWidth/Height得到。
如果你给html元素设置了一个宽度，那么offsetWidth就会存放这个值。
 
事件坐标
 
当一个鼠标事件发生时，至少有5对值来确定事件发生的位置。其中三个需要这里重点说明一下：
1、pageX/Y 相对于html元素的坐标值，CSS像素表示。
2、clientX/Y 相对于视口的坐标值，也是CSS像素值。
3、screenX/Y 相对于屏幕的坐标值，用设备像素表示。
 
你会在90%的情况下用到pageX/Y，事件相对于文档中的位置。
剩下10%的情况会用clientX/Y。
相对屏幕的坐标从来都不会用到的。
 
媒体查询 Media queries
 
你可以定义特定的CSS规则，并把它用在大于、等于或小于某个尺寸的页面。比如：
 
div.sidebar{
     width:300px;
}
 
@media all and (max-width: 400px) {
    div.sidebar{
        width: 100px;
    }
}
 
那么sidebar是300px宽，但当页面宽度小于400px的时候，sideabr的宽度就变为100px了。
那么问题来了， 我们在这里和max-width做对比的是哪个宽度。
 
两对相关的值：width/height 和 device-width/height
1、width/height 是和document.clientWidth/Height 一样的值，也就是视口。（CSS像素值）。
2、device.width/height 是和 screen.width/Height 一样的值。也就是设备像素。
 
显然媒体查询应该是作用在 视口这个 width 上的，对于 web开发者来说，浏览器窗口的宽度才是有意义的。
所以PC端的网站就忘掉 device-width 吧！
 
下一节会讲到移动设备中的概念，并分析和桌面端的重要区别。

viewport的故事（一）的更多相关文章

  1. 两个viewport的故事（第二部分）

    原文:http://www.quirksmode.org/mobile/viewports2.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如&l ...

  2. 两个viewport的故事（第一部分）

    原文:http://www.quirksmode.org/mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如< ...

  3. viewport的故事（二）

     挑重点的翻译 自原文 https://www.quirksmode.org/mobile/viewports2.html   在这一页我们将聊一聊移动端的浏览器.   移动端的问题   最明显的问题 ...

  4. 前端页面开发，最低兼容IE 8的多设备跨平台问题解决！

    项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...

  5. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  6. 移动Web应用开发入门指南——视觉篇

    视觉篇 智能移动设备由于发展历史短,但更新速度快,从而导致移动设备的物理属性差异巨大,其中一部分物理属性影响视觉,另一部分影响到交互.兼容或性能.对人类来说,至少有80%以上的外界信息通过视觉获得,视 ...

  7. 草珊瑚的css基础

    首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirctio ...

  8. pc端和移动端的“窗口”(viewport)故事（part1）

    A tale of two viewports - part one 在以下的系列文章中,我将为大家解释浏览器中的视窗和一些重要的元素的尺寸是如何起作用的,如:大家最熟悉的html元素以及window ...

  9. jQuery Mobile_简单的爱情故事

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. 清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  2. 有关于 java native方法

    看java源码时,经常看到native方法后,就没有具体的是实现了. 以前一直有疑惑,今天查了查,看到前辈们的博文才明白: Java的native方法http://blog.csdn.net/wike ...

  3. java(10)类的无参方法

    一.变量的作用域(有效的使用范围) 1.变量有2种 1.1成员变量(属性) 声明在类的里面,方法的外面 1.2 局部变量 声明在方法里面或for循环结构中 2.调用时的注意事项(初始值不同.作用域不同 ...

  4. python的线程和进程

    1.线程的基本概念 概念 线程是进程中执行运算的最小单位,是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但它可与同属一个进程的其它线程 ...

  5. BZOJ #3625 CF #438E 小朋友和二叉树

    清真多项式题 BZOJ #3625 codeforces #438E 题意 每个点的权值可以在集合$ S$中任取 求点权和恰好为$[1..n]$的不同的二叉树数量 数据范围全是$ 10^5$ $ So ...

  6. Rich feature hierarchies for accurate object detection and semantic segmentation（理解）

    0 - 背景 该论文是2014年CVPR的经典论文,其提出的模型称为R-CNN(Regions with Convolutional Neural Network Features),曾经是物体检测领 ...

  7. dubbo负载均衡与集群集群容错

    1.负载均衡 在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用. 1.  负载均衡策略 Random LoadBalance 随机,按权重设置随机概率.(默认值)在一个 ...

  8. 动态代理和CGlib

    静态代理:静态代理的类也需要实现接口interface1,还要创建一个实现接口interface1的其他类class1,并且在静态代理类重写的方法中调用class1重写的方法.操作太多冗余.不好 动态 ...

  9. hash与encrypt

    概括来说,哈希(Hash)是将目标文本转换成具有相同长度的.不可逆的杂凑字符串(或叫做消息摘要),而加密(Encrypt)是将目标文本转换成具有不同长度的.可逆的密文. 具体来说,两者有如下重要区别: ...

  10. IISARR方式整合Tomcat失敗

    需要在IIS安裝ARR 目标服务器:targetServer 配置反向代理的服务器:reveseProxServer 1.确定最终访问的网址:比如www.baidu.com  .www.csdn.ne ...