关于touch和web端的CSS说明

什么是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" />

1. width - 可视区域的宽度,为一个正整数，或字符串"device-width"

2. height - 可视区域的高度,为一个正整数，或字符串"device-height"

3. initial-scale - 初始的缩放比例,取值1.0则页面按实际尺寸显示，无任何缩放

4. minimum-scale - 允许用户缩放到的最小比例,为一个数字，可以带小数

5. maximum-scale - 允许用户缩放到的最大比例,为一个数字，可以带小数

6. user-scalable - 用户是否可以手动缩放,值为"no"或"yes", no 代表不允许，yes代表允许

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />

1. telephone - 数字是否转化为拨号链接，值为"no"或"yes", no 代表不允许，yes代表允许，当设置为no,<a href="tel:[phone]"></a>打电话

2. email - 是否自动识别邮箱，值为"no"或"yes", no 代表不允许，yes代表允许，当设置为no,当设置为no,<a href="mailto:[e-mail]?subject=Hello%20again">
   发送邮件

获取滚动条的值

window.scrollY  window.scrollX

桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，android和IOS通过window.scrollY window.scrollX

禁止复制粘贴文本

-webkit-user-select:none

移动端touch事件

1. touchstart //当手指接触屏幕时触发

2. touchmove //当已经接触屏幕的手指开始移动后触发

3. touchend //当手指离开屏幕时触发

4. touchcancel//当某种touch事件非正常结束时触发

这4个事件的触发顺序为：
touchstart -> touchmove -> touchend ->touchcancel

overflow 属性

overflow 属性规定当内容溢出元素框时发生的事情

1. visible 默认值。内容不会被修剪，会呈现在元素框之外。

2. hidden 内容会被修剪，并且其余内容是不可见的。

3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

5. inherit 规定应该从父元素继承 overflow 属性的值。

background-image和image的加载区别

在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image