什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
Meta标签
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />width– 可视区域的宽度,为一个正整数，或字符串”device-width”height– 可视区域的高度,为一个正整数，或字符串”device-height”initial-scale– 初始的缩放比例,取值1.0则页面按实际尺寸显示，无任何缩放minimum-scale– 允许用户缩放到的最小比例,为一个数字，可以带小数maximum-scale– 允许用户缩放到的最大比例,为一个数字，可以带小数user-scalable– 用户是否可以手动缩放,值为”no”或”yes”, no 代表不允许，yes代表允许
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
telephone– 数字是否转化为拨号链接，值为”no”或”yes”, no 代表不允许，yes代表允许，当设置为no,<a href="tel:4006661166"></a>打电话email– 是否自动识别邮箱，值为”no”或”yes”, no 代表不允许，yes代表允许，当设置为no,当设置为no,<a href="mailto:someone@microsoft.com?subject=Hello%20again">
发送邮件
获取滚动条的值
window.scrollY window.scrollX桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，android和IOS通过window.scrollY window.scrollX
禁止复制粘贴文本
-webkit-user-select:none移动端touch事件
touchstart//当手指接触屏幕时触发touchmove//当已经接触屏幕的手指开始移动后触发touchend//当手指离开屏幕时触发touchcancel//当某种touch事件非正常结束时触发
这4个事件的触发顺序为：
touchstart -> touchmove -> touchend ->touchcancel
overflow 属性
overflow 属性规定当内容溢出元素框时发生的事情
visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
background-image和image的加载区别
在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image
