在这一页我们将聊一聊移动端的浏览器。
 
移动端的问题
 
最明显的问题就是尺寸，比PC端小很多，要么整体缩小，那么文字几乎小到认不出来了，要么就只能看一部分。
所以我们要让网站在小屏幕也能很好的展现。
 
最重要的问题集中在CSS上，尤其是视口的尺寸，如果把PC的一比一放到移动端上，肯定是不起作用的，甚至是有点可怕。
你的布局将会被挤压变形。
 
一种方式是为移动浏览器做特定的站点。
实际上只有少数网站所有者会充分的去满足移动端的设备。
 
移动浏览器生产者想给客户端最好的体验，就像桌面端一样完美，一些技巧（sleight of hand）是必要的。
 
两个视口（the two viewports）？
 
移动端的视口太窄了，那么很明显的方案是将视口变得更宽。所以就有了visual viewport和layout viewport。
 
 
想象布局视口是一个大的图片，而你只有一个小一点的框，通过这个框去看这个图像。
这个小框被透明的材质环绕，你只能看到图像的一部分，这个部分就是visual viewport，就叫它可见视口吧。
你可以把这个图片拿远一点，看可以看到全部图像了
同理把图片拿近一点就只能看见一部分。
你可以改变框的转向，但图像不会变。
 
也就是说，我们的布局方向和设备方向（可见视口方向）可以不一样。
 
CSS布局中的百分比数值，会相对layout viewport来计算，会比可见视口要宽。
 
因此，html元素会使用layout viewport的宽度。所以css会显得好像网页像素值要比手机屏幕的大。
每个设备的布局视口尺寸都不太一样，iPhone 980px；Android 800px； Opera 850px；IE 974px；
其他的浏览器还有特殊的表现：
Symbian WebKit：两个视口保持一致，但如果使用了绝对值，layout viewport 还是可以伸展到最宽850px；
Samsung Webkit： layout viewport 和 最宽的元素保持一致
BlackBerry： 两个视口保持一致，且不变。
 
页面缩放 Zooming
 
两个视口都是CSS像素度量。但当可见视口由于缩放导致改变时，布局视口还是保持不变。
比如说页面放大了，屏幕上的CSS像素就少了。
 
理解layout viewport
 
当整个页面完全缩小到一个页面的时候，两个视口的尺寸时一致的，很多浏览器默认会使用完全缩小的模式。
当放大页面的时候，布局视口也是一样的。
横屏的时候layout viewport也会自动缩放和visual viewport的宽度保持一致。
web开发者通常不关心高度。
 
测量layout viewport
 
document.documentElement.clientWidth/Height 可以获取layout viewport 的尺寸
 
测量visual viewport
 
window.innerWidth/Height 可以获取visual viewport 的尺寸。
但不幸的是，很多浏览器不支持可见视口的测量。
 
屏幕
 
zoom level = screen.width/window.innerWidth
 
滚动偏移
 
你需要知道的是可见视口相对于布局视口的位置。也是存放在window.pageX/YOffset
 
<html>元素
 
和桌面端一样，document.documentElement.offsetWidth/Height 就是html元素的尺寸
 
媒体查询
 
也和桌面端一样。
width/height使用布局视口。
 
也就是说 width/height 对应 document.documentElement.clientWidth/Height
device-width/height 对应 screen,width/height
 
媒体查询可以知道设备是桌面版、平板还是移动设备，但无法区别出具体哪个设备。
 
事件坐标
 
pageX/Y page 是最有用的属性
 
clientX/Y visual viewport CSS像素值
 
screenX/Y 设备像素 没什么用
 
meta viewport
 
可以重新定义 layout viewport 的大小
 
假设一个页面只有一个元素，且没有设置 width
那么它会自动占满layout viewport的宽度
大多数浏览器会缩小整个页面，让 layout viewport 全部显示在屏幕上
 
 
所有用户都会马上放大页面，但大多数浏览器都会保持元素的宽度不变，就无法同时看到所有内容，不方便阅读。
 
 
Android WenKit 是个意外，它为了让页面适应屏幕，会减少有文本的元素的尺寸。
 
你可以试试将html的width 设置为320px；这样其他元素也会占据320px的宽度。
但也只能在页面放大的时候正确显示，浏览器默认会将网页缩小。
 
 
 
为了解决这个问题 苹果就发明了meta viewport标签
<meta name="viewport" content="width=320"> 就会将layout viewport设置为320px
现在页面的初始状态就正常了
 
 
你可以将layout viewport 的尺寸设置成你想要的大小，包括device-width（screen.width）
 
 
嗯 这篇文章看完我还是有点懵圈 不过已经理解了很多
 
在我没研究viewport之前，我的页面是通过媒体查询给html不同的font-size，然后使用rem做适配的。
这时候的layout viewport的尺寸 应该和document.documentElement.clientWidth 是一样的 都是980px；
然后我给min-width：1243px 这一档的font-size设置的是10px；
其余设备设置为20px；在手机上显示正常
 
所以在我后来设置了deviceWidth的之后，layout viewport的尺寸就小了很多，所以移动端的字就显得超级大。
是我原来的方案好呢 还是根据deviceWidth好呢 还是要再研究一下的。

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/viewports.html   概念:设备像素和CSS像素   设备像素可以通过 screen.width/he ...

  4. 生活沉思录 via 哲理小故事

    本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛, ...

  5. 杂谈---小故事小道理，面试中的小技巧（NO.2）

    本篇是接着上一篇面试随笔的,上一次有猿友反应写的有些“扯淡”,LZ思来想去最大的原因可能是由于上一章写的全是一些大忌,既然是大忌,那么在现实当中发生的概率还是相对较小的,大部分人还是很少在面试中犯如此 ...

  6. 前端页面开发，最低兼容IE 8的多设备跨平台问题解决！

    项目要求: 网站能够使用PC.ipad.mobile phone正常访问 页面PSD版式宽度分别为1024px和750px 参考资料 使用CSS3 Media Queries,其作用就是允许添加表达式 ...

  7. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  8. 草珊瑚的css基础

    首先要了解如下概念: viewport,窗口大小,containing block,block formatting context,inline formatting context,dirctio ...

  9. python之网络爬虫

    一.演绎自已的北爱 踏上北漂的航班,开始演奏了我自已的北京爱情故事 二.爬虫1 1.网络爬虫的思路 首先:指定一个url,然后打开这个url地址,读其中的内容. 其次:从读取的内容中过滤关键字:这一步 ...

随机推荐

  1. LFYZ-OJ ID: 1016 输油管道问题

    分析 根据之前的证明,我们已经知道最佳输油管线的y位置就是所有油井y坐标序列的中位数,故解题过程为: 1. 读入n个y数据 2. 对n个y数据进行排序(升序或降序) 3. 求中位数zws 4. 计算输 ...

  2. javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  3. [浏览器事件循环] javaScript事件循环 EventLoop

    前言 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 先熟悉基本概念 [堆Heap] 堆是一种数据结构 ...

  4. go语言学习 一

    1.变量声明 指定变量类型,声明后若不赋值,使用默认值 根据值自行判定变量类型. 省略var, 注意 :=左侧的变量不应该是已经声明过的,否则会导致编译错误 2.go语言作用域 函数内定义的变量称为局 ...

  5. 🍓vue & react 一些重要但没必要死记硬背的东西

  6. 第二章 Java程序设计环境

    安装 Java 开发工具包 JDK : 编写Java程序的程序员使用的软件 JRE : 运行Java程序的环境,包含JVM和基本类库, 但不包含编译器 SE, EE, ME Java FX : 用于图 ...

  7. dubbo监控中心与admin管理项目的使用

    监控中心与admin管理项目都是针对特定的注册中心进行监控,因此需要配置对应的注册中心的地址,或者在dubbo.properties或者在applications.properties文件配置. == ...

  8. python中取整数的几种方法

    1.向下取整: int() >>> a = 14.38 >>> int(a) 2.向上取整:ceil() 使用ceil()方法时需要导入math模块,例如 > ...

  9. MinGW GCC 8.1.0 2018年5月2日 出炉啦

    MSYS_MinGW-w64_GCC_810_x86-x64.7z for x86 x64 59.0 MB发布日期: 2018-05-04 下载地址:https://sourceforge.net/p ...

  10. 【easy】88. Merge Sorted Array 合并两个有序数组

    合并两个有序的list 把排序好的nums2插入nums1中,假设nums1这个vector的空间永远是够的 思路:倒序!! class Solution { public: void merge(v ...