概念：设备像素和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. javaScript drag对象进行拖拽使用详解

    目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何? 桌面端的支持 ...

  2. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  3. MySQL无法插入中文的解决方案

    本人在做数据库的连接过程中,发现无法插入中文值.原因是mysql的默认编码是latin1,只须将编码改为utf8即可. 在mysql的命令行窗口中输入 status 会出现当前的编码.在mysql的安 ...

  4. win2003 创建nds辅助服务器 步骤

    准备条件:win2003系统DNS主机 win2003系统 DNS副机  在同一局域网下: 目标.新建个laohu.com 主机并添加副机 再 正向查找区域 右键新建区域---下一步--- 选择主要区 ...

  5. webpack 代码优化压缩方法

    在配置基于webpack的react单页面脚手架时,公共依赖库代码打包至vender.js中,页面逻辑代码打包至app.js中,使用webpack-bundle-analyzer分析发现,两个js中包 ...

  6. Spring系列(一) Spring的核心

    Spring 简介 Spring 是一个开源轻量级企业应用架构,目的是为了简化企业级应用开发.(1)Spring 框架可以帮我们管理对象的生命周期,帮助我们管理对象间的依赖关系,相互协作:(2)Spr ...

  7. Django之Cookie和Session

    http://www.cnblogs.com/liwenzhou/p/8343243.html 一.Cookie Cookie是什么? 就是保存在客户端浏览器上的键值对. Cookie为什么存在? 因 ...

  8. swagger-ui中测试接口（enum传值） 报400错误

    swagger-ui中测试接口(enum传值) 报400错误 PriceRuleController: @PostMapping("/update") @ApiOperation( ...

  9. python进制转化函数，10进制字符串互转，16进制字符串互转

    来了老弟,emmmmm,今天想到平时经常用到编码转化,把字符串转化为16进制绕过等等的,今天想着用python写个玩,查询了一些资料,看了些bolg 上面的两个函数是将二进制流转化为16进制,data ...

  10. LaTeX技巧892: Ubuntu 安装新版本TeXLive并更新

    原文地址:http://www.latexstudio.net/archives/9788.html 摘要: 本文比较系统地介绍了在Ubuntu下的TeXLive的安装与配置测试过程,建议使用Ubun ...