移動web

1. 移動WEB
1.1 移動端瀏覽器
如今移動端使用最多的瀏覽器內核爲webkit,因此相對電腦端來講,移動端的前端開發更加方便.可是不一樣於電腦端,移動端的分辨率倒是一個比較重要的部分.
1.2 移動WEB開發注意
在移動端,咱們須要注意一個視口的概念,視口就是用戶移動端可視區域的大小,如今市面上視口大小種類較多,若是在開發時仍是按照電腦端的佈局的話,會出現只兼容了一致分辨率,不支持其餘分辨率的狀況.
因此咱們對於移動端web開發會採用百分百的形式來進行佈局.
1.3 移動web視口
如今市面上使用的移動設備分辨率各有不一樣,那如何才能使一個頁面知足不一樣分辨率的要求呢?
html中已經給出了答案,html中提供了一個meta標籤name屬性值,及其一系列的屬性設置.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 在這個標籤中有幾個比較經常使用的屬性值:
width=device-width設置頁面自動適配移動端的視口寬度;
user-scalable=no設置用戶是否可以縮放頁面大小,no爲用戶不能縮放,yes爲用戶可以縮放;
initial-scale=1.0設置頁面的默認縮放比例,一般設置爲1.0;
maximum-scale設置頁面最大的縮放比例;
minimum-scale設置頁面最小的縮放比例.
可是在電腦端頁面設置meta標籤屬性時,沒有效果.
1.4 移動web中特別的樣式屬性
-webkit-tap-highlight-color: transparent;去除移動端默認的手指點擊時的高亮效果
-webkit-box-sizing:border-box ;添加盒子模型爲了優先保證盒子的大小,不影響頁面佈局.
-webkit-appearance: none;有一些移動端的瀏覽器會有默認的3d效果,好比陰影,3d漸變等