關於移動端適配

視圖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