概念：设备像素和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. flyway和liquibase的使用样例

    在代码上我们有svn和git等诸多的版本控制方法. 但是在数据库上却没有相应的工具.一度导致多环境见的数据库同步难以维持. flyway和liquibase都是常见的数据库版本控制工具. flyway ...

  2. [物理学与PDEs]第1章第8节 静电场和静磁场 8.2 稳定电流的电场

    1. 此时, Maxwell 方程组为 $$\beex \bea \Div{\bf D}&=\rho_f,\\ \rot {\bf E}&={\bf 0},\\ \Div{\bf B} ...

  3. [物理学与PDEs]第1章第8节 静电场和静磁场 8.1 静电场

    1. 静电场: 由静止电荷产生的稳定电场. 2. 此时, Maxwell 方程组为 $$\bex \Div{\bf D}=\rho_f,\quad \rot{\bf E}={\bf 0}. \eex$ ...

  4. 5.CentOS7安装mariadb

    MariaDB 和 MySQL 使用是一样的,二者只要安装一个就行了 MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司 ...

  5. MapReduce输出文件名更改

    默认情况下生成的文件名是part-r-00000格式,想要自定义生成输出文件名可以使用org.apache.hadoop.mapreduce.lib.output.MultipleOutputs类用来 ...

  6. C++ 变长模板参数

    转载自: http://www.cnblogs.com/liyiwen/archive/2013/04/13/3018608.html C++11 语言核心的改进中,最为关注的有 rvalue ref ...

  7. resultset 查询时返回多个相同值

    背景 做个简单的接口开发,拿到的平台比较不理想,好久没重新搭建一个了,正好练练手.用了基础的servlet,maven,logback(log4j不支持格式化,比较烦人),fastjson,druid ...

  8. ES进阶--04

    第30节彻底掌握IK中文分词_上机动手实战IK中文分词器的安装和使用 之前大家会发现,我们全部是用英文在玩儿...好玩儿不好玩儿...不好玩儿 中国人,其实我们用来进行搜索的,绝大多数,都是中文应用, ...

  9. 【原创】运维基础之keepalived

    keepalived 2.0.12 官方:http://www.keepalived.org/ 一 简介 Keepalived is a routing software written in C. ...

  10. Visual Studio 2015中 没有“安装和部署”的解决方法

    使用Visual Studio 2015 Community新建项目,在已安装模板中的“其它项目类型”下未找到“安装和部署”选项.在微软官网下载 Microsoft Visual Studio 201 ...