概念：设备像素和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. PLSQL Developer 远程连接Oracle数据库

    下载.安装.激活PLSQL Developer,本例使用 PLSQL Developer 13 (64 bit). 下载Oracle即时客户端 Instant Client,本例使用11gR2 链接: ...

  2. line-height && vertical-align 学习总结

    前言 line-height.font-size.vertical-align是设置行内元素布局的关键属性.这三个属性是相互依赖的关系,改变行间距离.设置垂直对齐等都需要它们的通力合作. 行高 lin ...

  3. [Luogu P1144]最短路计数

    emmmm这个题看起来非常复杂,实际上仔细一分析发现到一个点最短路的个数就是所有前驱最短路个数之和.如果在图上表示也就是以1为根的bfs搜索树,一个点的最短路个数等于每一个能够向它扩展的所有点的最短路 ...

  4. Spring系列(六) Spring Web MVC 应用构建分析

    DispatcherServlet DispatcherServlet 是Spring MVC的前端控制器名称, 用户的请求到达这里进行集中处理, 在Spring MVC中, 它的作用是为不同请求匹配 ...

  5. [Kubernetes]如何让集群为我们工作?

    前一段时间倒腾k8s的时候,写了一系列的博客,有很多人不理解那样做的意义是什么,为什么要那样做,这篇文章就尝试解释一下,在实际环境中,是如何让集群为我们工作的. 因为只研究了一个月左右的时间,认识难免 ...

  6. 深入理解JavaScript，这一篇就够了

    前言 JavaScript 是我接触到的第二门编程语言,第一门是 C 语言.然后才是 C++.Java 还有其它一些什么.所以我对 JavaScript 是非常有感情的,毕竟使用它有十多年了.早就想写 ...

  7. pycharm导入自己写的模块时，模块下方出现红色波浪线的解决方案

    文章链接:https://blog.csdn.net/weixin_38383877/article/details/81121851 这种情况其实可以不用管,是可以正常运行的: 但是,如果看着不舒服 ...

  8. 《剑指offer》整数中1出现的次数

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  9. SpringMVC的入门示例

    1.配置流程说明 第一步:导入包 第二步:构建一个请求,编写请求页面 第三步:配置核心控制器 第四步:构建一个业务控制器 第五步:编写Spring配置文件 第六步:编写一个返回页面 2.配置流程--- ...

  10. day19模块1

    http://www.cnblogs.com/Eva-J/articles/7228075.html#_label10 collections模块: 在内置数据类型(dict.list.set.tup ...