关于移动端适配

视图meta viewport

<meta name = "viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1,user-scalable=0">

属性含义
移动端会将980px的PC端网页自行缩放导致边缘留白或者是字体过小。

属性	含义
width=device-width	设备宽度
minimum-scale	最大缩小比例
maximum-scale	最大放大比例
initial-scale	初始比例
user-scalable	是否允许放缩

图片适配

图片最大为自身最大宽度，防止外界容器过大导致图片变形。

img{
	max-width:100%
}
//下列不正确`
img{
	width:100%
}

媒体查询

CSS3新增的@media。

动态rem

实现响应式布局
可在根元素设置font-size

其他问题

click的300ms延迟

Safari浏览器决定300ms内点开链接还是进行缩放

1. 使用meta的viewport

• user-scalable=no完全禁止用户缩放
• width=device-width实现移动端响应式适配，禁用300ms

2. 引用库fastclick
touchend触发时通过DOM模拟click事件，并阻拦300ms后的click事件

点击穿透

点击后的触发事件：touchstart->touchend->click
A在B元素上。点击A后A隐藏，300ms后click事件触发，导致A被click