文章目錄
0、關於web app
web app 可以認爲就是一個手機(網)站
優點：
- 更新方便
- 跨平臺的，
缺點：
- 用戶比原生app體現差些，
- 無法手機裏系統功能，彈窗，通知，
- 也無法獲取手機裏的本地資源，比如通訊錄
![在這裏插入圖片描述]()
1、移動端與pc端的區別
- 系統
pc：windows/mac（區別不大）
移動端：ios/android/windows（有區別） - 瀏覽器
pc：區別很大 - 有瀏覽器兼容問題
移動端：區別不大 - 手機瀏覽器大部分是webkit內核，沒有兼容問題，css3也支持 - 分辨率（尺寸）
pc：有區別
移動端：區別很大 - 分辨率在不同的設備裏不一樣
移動設備市場份額、分辨率等詳情統計信息查看：手機相關信息統計
2、尺寸相關概念
2.1、設備像素（物理像素）
- 設備像素 又叫 物理像素，由一個個會發光的點組成，從出廠的時候物理像素就固定了，不會變了;
就像路邊的顯示屏 - 設備像素的單位是pt(點) – pt是絕對的單位 ， 1 pt = 1/72英寸（inch）;
- 手機屏幕裏同理，一個個的發光點叫做設備像素，手機中的分辨率 指的就是設備像素，出廠後設備像素是不變的
- 像iPhone6 的屏幕分辨率是750*1334，代表iphon6橫向由750個像素點，縱向上有1334個像素點
- 所以準確來說分辨率不應該用px來表示，應該用pt : 750pt * 1334pt
2.2、CSS像素(設備獨立像素，邏輯像素)
- CSS像素 是我們平時樣式中的px，這是一個抽象的概念，是一個相對單位，大小是不固定的
css像素的大小取決於設備像素的大小- 我們切的圖是針對我們的電腦，因爲
電腦上默認1px = 1pt - 但是當我們在電腦上縮放比例的時候，比如放大到兩百的時候，css像素也會改變，會變成1px = 2pt，也就是當電腦上縮放比例的時候，css像素會改變，樣式裏 還是400px , 顯示屏上 會變成800px(pt), 所以css 像素是個相對單位，用戶縮放會影響css像素的大小；
- w3c規定：px 這個並不是大小的單位，不表示大小；而是一個視角的單位，表示角度；，具體查看 詳細信息
2.3、屏幕的尺寸
- 屏幕的尺寸，不是面積，而是屏幕對角線的長度，這個長度的單位是 英寸inch
- 1英寸inch = 2.54釐米cm
- 屏幕尺寸=屏幕斜邊的像素/PPI （PPI - 每英寸上像素的數量）
![在這裏插入圖片描述]()
就像上圖：計算屏幕尺寸：屏幕尺寸=屏幕斜邊的像素/PPI
//屏幕斜邊的像素
const margin=Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2)); //屏幕斜邊的像素
console.log(margin); //2202.9071700822983
console.log(margin/401); //5.493534089980794 屏幕尺寸 ，約等於5.5英寸，PPI 是401
console.log(margin/5.5); //400.52857637859967 PPI
2.4、像素密度PPI - 每英寸（面積）上像素（設備像素）的數量
- ppi是一個定值，出廠後就固定了，是一個固定的參數
- 像素密度 PPI的值越高，代表在一定尺寸的屏幕上像素數量越多，屏幕越清晰 – 屏幕是否清晰，看PPI最直接，不用看分辨率
如下圖，單位面積沒變，裏面的像素點更多了，ppi越高越清晰（蘋果的高清屏被叫做視網膜屏）
- 同一尺寸下，ppi增加n倍，物理像素會增加n*n倍。同時每個物理像素的大小會縮小1/n，例如：PPI提高了一倍，那物理像素數量會提高4倍，每個物理像素的大小會縮小1/4
PPI = 屏幕斜邊的像素 / 屏幕尺寸- 點擊 查看不同機型分辨率，屏幕尺寸 和 ppi
n
//屏幕斜邊的像素
const margin=Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2)); //屏幕斜邊的像素
console.log(margin/5.5); //400.52857637859967 PPI
2.5 像素比 - dpr
像素比DPR = 物理像素 / css像素（之前說過css像素px 和 物理像素 pt 之間的關係就是 像素比，）- 像素比的本質 ： 一個css像素 佔用 幾個 物理像素，一個px 佔 幾個 pt
- 獲取：
window.devicePixelRatio
iphone6
375 × 667 設備獨立像素，屏幕尺寸 --css像素
750 × 1334 設備像素，屏幕分辨率 -- 物理像素
2 像素比
//DPR=物理像素/css像素 => 2=750/css像素 => css像素=750/2=375
4.像素比的作用： 保證高清屏能夠正常的顯示圖片的大小；（保證高清屏 和普通屏顯示的效果一樣）
點擊查看 不同手機型號的 像素比
理論上：ppi增加1倍後，每個物理像素的大小會縮小1/4，導致圖片視覺上會變小1/4，如上圖；
實際上：手機中顯示並不是縮小的情況，而是如下圖，即使ppi增加，導致每個物理像素的大小會縮小1/4， 所以我們可以把css像素變大，改成1px = 2pt,這樣，圖片視覺上大小一樣了，但是圖片會變模糊，所以我們不能這樣改css像素，我們可以給一個大尺寸圖片放進去，像上圖我們給個原來圖片尺寸*2的大小的圖片就正常顯示了
3、viewport
viewport - 視口（可視區窗口），通過meta標籤設置
- 可以認爲 html的寬度 就是viewport的寬度
- 未設置時，屏幕的寬度默認爲980，但不同的型號也會不同
- 用
document.documentElement.clientWidth方法獲取 viewport的值，窗口的寬度
| content | 視口裏的相關設置 |
|---|---|
| width | 視口的寬度，值爲一個正整數，或字符串device-width（設備的實際寬度 – css像素）。不建議設置數字（安卓設備有些不支持） |
| height | 視口的高度（與width一至）- 一般不用管 |
| user-scalable | 是否允許用戶進行頁面縮放，值爲no或yes，代表不允許與允許 |
| initial-scale | 頁面初始縮放值，值爲一個數字（可以帶小數）。 |
| minimum-scale | 頁面最小能夠縮放的比例，值爲一個數字（可以帶小數）。 |
| maximum-scale | 頁面最大能夠縮放的比例，值爲一個數字（可以帶小數）。 |
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
- device-width是設備的實際寬度 – css像素，比如iphone6 這樣設置後，viewport 寬度就是375
- initial-scale有值的情況下算頁面的公式：
縮放比 = css像素 / viewport寬度viewport寬度 = css像素 / 縮放比 width=device-width和initial-scale=1效果一樣，當兩個都寫，哪個大用哪個的尺寸；
注意：
1、有的時候大家會見到同時寫了不允許縮放，又寫了最小與最大能夠縮放的比例，那這樣不是衝突了，爲什麼都已經寫了不允許縮放了，還要寫那些？
原因：
- 會有一些第三方的工具能夠破壞user-scalable，比方說一些給父母的手機把文字放大的工具，就會有可能。不過一般是沒有問題的
- 像iphone5下還會有黑邊
- 所以寫全了，可以避免一些bug
2、ios10不支持user-scalable=no，後面事件解決（阻止document的touchstart的默認行爲）
4、meta 標籤
meta 標籤 - 輔助型標籤，本身沒有任何作用，可以藉助其他東西實現一些功能；
seo優化：
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,圖書、食品等數萬個品牌優質商品.便捷、誠信的服務!">
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東">
移動端常用meta標籤：
禁止識別電話與郵箱(但是郵箱沒效果)
<meta name="format-detection" content="telephone=no,email=no" />
設置添加到主屏後的標題(ios)
<meta name="apple-mobile-web-app-title" content="標題">
添加到主屏幕後，全屏顯示，刪除蘋果默認的工具欄和菜單欄（無用）
<meta name="apple-mobile-web-app-capable" content="yes" />
放在桌面上的logo
<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />
啓動時候的畫面（無用）
<link rel="apple-touch-startup-image" href="logo_startup.png" />
設置x5內核瀏覽器只能豎屏瀏覽（只有UC有效）
<meta name="x5-orientation" content="portrait" />
設置x5內核瀏覽器全屏瀏覽
<meta name="x5-fullscreen" content="true" />
設置UC瀏覽器只能豎屏瀏覽
<meta name="screen-orientation" content="portrait">
設置UC瀏覽器全屏瀏覽
<meta name="full-screen" content="yes">
如果想屏蔽所有瀏覽器的橫屏的話，需要在後面陀螺儀那章節講
5、移動端樣式重置
- 禁止用戶選中文字，安卓無效（在事件那章解決，包括長按的時候會出菜單，用阻止touchstart後的默認行爲搞定）
-webkit-user-select: none; - 禁止長按彈出系統菜單
-webkit-touch-callout: none; - 去除android下a/button/input標籤被點擊時產生的邊框 & 去除ios下a標籤被點擊時產生的半透明灰色背景
-webkit-tap-highlight-color: rgba(0,0,0,0);
a,input,button{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
默認手機橫豎屏切換的時候，字體大小會變；切換橫豎屏或者用戶自己通過瀏覽器設置的話，可以改變字體的大小(需要給body下的所有元素)
-webkit-text-size-adjust: 100%;- 按鈕在ios下都是圓角
-webkit-appearance: none; //去掉button與input都會有個默認背景
border-radius: 0; //去掉input有個默認圓角 - 修改placeholder的樣式
input::-webkit-input-placeholder{
color:#000; //默認的樣式
}
input:focus::-webkit-input-placeholder{
color:#f00; //點擊後的樣式
}
-
字體
移動設備裏沒有微軟雅黑的字體；
ios
默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體
android
默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體font-family: helvetica;
總結：
body{
font-family: helvetica; /*設置字體，這個字體一般都有，如果沒有的話可以用自定義字體--作爲字體文件加載進來，會消耗用戶瀏覽*/
margin: 0;
}
body *{
-webkit-user-select: none; /*禁止用戶選中文字*/
-webkit-touch-callout: none; /*禁止長按彈出系統菜單*/
-webkit-text-size-adjust: 100%; /*防止手機橫豎屏切換的時候，字體大小會變*/
}
a,input,button{
-webkit-tap-highlight-color: rgba(0,0,0,0); /*去除android下a/button/input標籤被點擊時產生的邊框 & 去除ios下a標籤被點擊時產生的半透明灰色背景*/
}
button,input{
-webkit-appearance: none; /* 去掉button與input 默認背景*/
border-radius: 0; /*去掉input默認圓角*/
}
input::-webkit-input-placeholder{
color:#000; /*修改placeholder的樣式--默認的樣式*/
}
input:focus::-webkit-input-placeholder{
color:#f00; /*修改placeholder的樣式--點擊後的樣式*/
}
6、webapp真機測試
真機測試：手機中打開電腦中的地址，而且地址是本地的，不是在線的，而且是真機測試，手機中會自動刷新
- 手機中打開電腦的頁面，一定要保證手機與電腦在同一wifi下
win+ r輸入cmd打開命令行- 輸入
ipconfig找ipv4地址 - 在瀏覽器中本地服務的ip 改爲
ipv4的地址 - 賦值地址後，百度裏找二維碼，生產二維碼進行查看