Window.devicePixelRatio
This read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. 
该值为分辨率之间的比，不是直接比较像素。分辨率是指单位英寸内像素数，类似于PPI。
pc端浏览器中dpr的值都为1，所以css中1px的元素在屏幕中占据1物理像素。
但在手机端，因为高分屏的出现，物理像素和css逻辑像素并不是1比1的关系。比如iPhone5中的dpr为2，就是2个物理像素对应1个逻辑像素。
另外缩放也会改变这种对应关系。

viewport

The width of the <html> element is
restricted by the width of the viewport. The <html> element takes 100% of
the width of that viewport.The viewport, in turn, is exactly equal to the
browser window: it’s been defined as such.（html的宽度由viewport的宽度决定）

document.documentElement.clientWidth，gives the dimensions
of the viewport, and not of the <html> element。 获取浏览器可视窗口的宽度（如果有滚动条时，不含滚动条的宽度）。

screen.width：屏幕的尺寸大小。You’re not interested in the physical size of
the screen, but in how many CSS pixels currently fit on it.

Media queries：针对不同尺寸的元素使用不同的样式。

Web developers are not interested in the device
width; it’s the width of the browser window that counts.So use width and forget
device-width — on desktop.

手机端

Mobile browser vendors want to offer their
clients the best possible experience, which right now means “as much like
desktop as possible.” That,
however, requires viewport to be split into two: the visual viewport and the
layout viewport. （为了能在移动设备上正常显示pc浏览器上的网站内容，引进了虚拟的layout viewport的概念。）

The visual viewport is the
part of the page that’s currently shown on-screen. The user may scroll to change
the part of the page he sees, or zoom to change the size of the visual
viewport.

How wide is the layout viewport? That differs
per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and
IE 974px. 所以pc页面的内容也能在手机上浏览，只是会缩的很小。

You can change the orientation of the frame(visual viewport), but the size and
shape of the large image (layout viewport) never changes.

Zooming

Many mobile browsers initially show any page in
fully zoomed-out mode. Most browsers zoom out to show the entire layout
viewport on the screen. browsers have chosen their dimensions of the layout
viewport such that it completely covers the screen in fully zoomed-out mode
(and is thus equal to the visual viewport). Thus the width and the height of
the layout viewport are equal to whatever can be shown on the screen in the
maximally zoomed-out mode. When the user zooms in these dimensions stay the
same.

Measuring the visual viewport

visual viewport, it is measured by window.innerWidth/Height,it shows how many CSS pixels currently fit on the screen.
Obviously the measurements change when the user zooms out or in, since more or
fewer CSS pixels fit into the screen.

Event coordinates

pageX/Y is still relative to the page in CSS pixels.

screenX/Y is relative to the screen in device pixels,
this is the same reference that clientX/Y uses, and device pixels are useless.

Meta viewport

<meta
name="viewport" content="width=320">

It is meant to resize the layout viewport. 因为移动端默认的layout
viewport比visual
viewport大，所以通过meta标签控制layout
viewport的属性达到更好的显示效果。

当设置width=device-width时，layout viewport就和visual viewport一样宽，但是屏幕会缩放到一定比率以显示所有内容。

缩放(zoom)和移动操作控制的是visual
viewport；

layout
viewport一旦初始化好后，就不会再变；可以通过meta标签的属性控制layout
viewport。

苹果6的显示效果（通过chrome测试时自动刷新常有问题，最好点击Toggle
device toolbar查看）

苹果6的dpr为2，物理分辨率为1334*750，所以visual viewport内宽可以显示375个css像素。

没有设置meta时，safari默认的layout viewport为980px，若页面的宽度小于layout
viewport的宽度，则显示980px。否则safari会不断缩小（zoom out）页面直到全部layout viewport在visual point中显示为止。

如果设置width而设定initail-scale的话，会缩放到合适比例，没有滚动条。

如果再设置initial-scale=1.0，则不会进行缩放，会产生滚动条，通过移动来显示全部内容：如下

摘自A tale of two viewports，对相关概念介绍的非常清楚。

手机端的viewport属性的更多相关文章

  1. fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  2. 涨姿势！手机端的META你知道多少？

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  3. 手机端的META你有多了解？

    我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...

  4. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  5. 手机端的META你知道多少？

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  6. 学习手机端的META差异，打造自己的移动网页

    我们先来简单了解下meta标签:meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定 ...

  7. 山西大同大学教务处学生端--送给学弟，学妹的礼物，可在PC端，手机端操作

    解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...

  8. 手机端的META你知道多少

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

  9. 手机端的META

    一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equ ...

随机推荐

  1. Java--JDBC连接数据库

         我们知道Java中的jdbc是用来连接应用程序和数据系统的,本篇文章主要就来看看关于JDBC的实现和使用细节.主要包含以下几点内容: JDBC的基本知识(数据驱动程序) JDBC的连接配置 ...

  2. GNU/Linux与开源文化的那些人和事

     一.计算机的发明 世上本无路,走的人多了,就有了路.世上本无计算机,琢磨的人多了--没有计算机,一切无从谈起. 三个人对计算机的发明功不可没,居功至伟.阿兰·图灵(Alan Mathison Tur ...

  3. 手机自动化测试：appium源码分析之bootstrap十二

    手机自动化测试:appium源码分析之bootstrap十二   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣 ...

  4. Combination Sum系列问题

    主要使用方法是backtracking. Combination Sum Given a set of candidate numbers (C) and a target number (T), f ...

  5. Myeclipse8.5开发-安装一：Myeclipse8.5注册码生成程序

    环境:Myeclipces8.5 1.安装Myeclipces8.5. 2.打开Myeclipces新建任意项目. 3.新建MyEclipseKeyGen.java类.点击运行,控制台输入您的注册名, ...

  6. 关于C++ 循环

    有的时分,可能需求屡次履行同一块代码.通常情况下,句子是顺序履行的:函数中的第一个句子先履行,接着是第二个句子,依此类推. 编程言语供给了答应更为杂乱的履行途径的多种操控结构. 循环句子答应咱们屡次履 ...

  7. 使用Python-iGraph绘制贴吧/微博好友关系图

    想通过图形化的方式显示社交网络特定用户的好友关系,上网找了一下这方面的图形库有networkx.graphviz等,找了好久我选择了iGraph这个图形库. igraph在Windows下的安装稍微有 ...

  8. PLSQL创建定时任务

    在使用oracle最匹配的工具plsql的时候,如果用plsql创建定时器呢?下面我简单介绍使用工具创建定时器的方法: 1.创建任务执行的存储过程,如名称为YxtestJob,向测试表中插入数据 cr ...

  9. 《C++之那些年踩过的坑（附录一）》

    C++之那些年踩过的坑(附录一) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自 ...

  10. 系统启动 之 Linux系统启动概述(1)

    随着智能终端功能的越来越庞大,与之,硬件配置越来越高,开机时间却越来越长.人们在享受强大功能的同时,对冗长的智能终端的开机时间却越来越缺乏耐心. 为了"取悦"用户,需要提供较好的用 ...