概念：设备像素和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. Arduino传感器学习目录

    Arduino-接口图  在Windows上安装Arduino-IDE  函数库和程序架构介绍   Arduino语法-变量和常量 Arduino常用的数据类型以及转换  Arduino—运算符   ...

  2. Codeforces 1100F(线性基+贪心)

    题目链接 题意 给定序列,$q(1\leq q \leq 100000) $次询问,每次查询给定区间内的最大异或子集. 思路 涉及到最大异或子集肯定从线性基角度入手.将询问按右端点排序后离线处理询问, ...

  3. 4.Centos7安装JDK8以及环境配置

    1.下载 linux 版本 jdk (jdk-8u11-linux-x64.tar.gz) 一定要是 .tar.gz 版本,可以去我的百度网盘下载或者在百度上面找 2.新建文件夹命令:mkdir /u ...

  4. Leetcode#70. Climbing Stairs（爬楼梯）

    题目描述 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解 ...

  5. word20161228

    1.principles英[p'rɪnsəplz]美[p'rɪnsəplz]n.原则; 原理; 准则; 道义; 节操; 原则( principle的名词复数 ); 工作原理; [P-] (基督教科学派 ...

  6. 电子医疗设备创新研发应该用i.MX6Q开发板吗？为医疗设备提供解决方案

    伴随医疗信息化.移动化.智能化的不断发展,居民对自身健康的关注度持续加强,全球医疗电子产业近年来持续保持快速增长态势.同时,源于庞大的人口基数以及迅速增长的老龄化人口带来持续增长的医疗服务需求,加之全 ...

  7. mysql和SQLYog工具使用

    在做 android java web开发过程中,需要用到mysql数据库,使用可视化工具SQLYog管理工具,现介绍如下: 首先下载mysql工具 下载地址   https://dev.mysql. ...

  8. tomcat 优化建议

    下面给出的是tomcat的优化建议,如果不同意见请留言. 上配置: tomcat jmx配置访问:修改catalina.sh CATALINA_OPTS="$CATALINA_OPTS -D ...

  9. 14.并发与异步 - 1.线程处理Thread -《果壳中的c#》

    14.2.1 创建一个线程 实例化一个Thread对象,然后调用它的Start方法,就可以创建和启动一个新的线程.最简单的Thread构造方法是接受一个ThreadStart代理:一个无参方法,表示执 ...

  10. 使用 RAII 完成线程等待

    当使用 std::thread 对象执行线程时,必须要调用 join() (或者 detach(),由于 detach() 可以立即调用,所以这里只考虑 join()) #include <io ...