移动web开发-viewport
对于移动端的网页，一般head标签里都需要添加一行：
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no" /> |
viewport的宽度决定了html这个标签的宽度。viewport又分为visual viewport(可视窗口）和layout viewport（布局窗口）。
Viewport是手机屏幕上能用来显示我们的网页的那一块区域。但是viewport并不等于浏览器的可视区域。
- width = device-width：设置layout viewport 的宽度，device-width为设备宽度
- initial-scale = 1.0：设置页面的初始缩放值
- minimum-scale = 1.0：允许用户的最小缩放值
- maximum-scale = 1.0：允许用户的最大缩放值
- user-scalable = no：是否允许用户进行缩放
大多数手机默认的viewport为980，若不加那句话，手机会按viewport为980来显示网页。如果咱们按640比例开发的网页，会变小。
页面显示时，页面会根据设置的viewport放大或缩小屏幕，比如页面按宽为640px开发的页面，那放在viewport设置320的屏幕上，会放大一倍。
jQuery为动态创建的元素绑定事件
使用jQuery中的on方法:
$( a ).on(event, selector, fn );
- a : 对该元素的父节点执行on方法
- Event ：为该元素事件绑定的事件
- Selector ：动态创建的元素
- Fn ：触发事件后执行的方法
On方法大致原理：
每次在父节点上的event都会被执行，但是只有当对selector执行event，会返回需要执行的fn方法。