自己第一次做手機web頁面的一些總結

發表時間：2017-5-22

發布人：葵宇科技

浏覽次數：31

一、移動(dòng)端web開發的單位

1. 單位

先來羅列下(xià)學習移動(dòng)頁面構建的過程中(zhōng)可(kě)能看到過一些單位：

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

對上訴單位簡單做個(gè)分類，并對其中(zhōng)一些關(guān)系進行比較

（1）什麼是絕對長度單位？什麼是相對長度單位？

絕對長度單位：in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（派卡 四号字體尺寸）。關(guān)系1in = 2.54cm = 25.4 mm = 72pt = 6pc，

網頁中(zhōng)應用比較少(shǎo)。

相對長度單位：是手機網頁設計中(zhōng)使用最多的長度單位，包括rem、px、em等。

px:在手機中(zhōng)和(hé)電腦一樣是基于分辨率，但手機上同時4.7寸屏幕的分辨率：可(kě)以是1- 3倍像素，iphone 6和(hé)7是2倍像素，iphone 6plus和(hé)7plus為2.6倍像素，安卓手機中(zhōng)低檔一般為2倍像素，高端機一般會做到3倍像素，對于做各種機型兼容px是無法滿足的；如(rú)使用px作為基本上每個(gè)手機上顯示的都會有差異

em:em是相對于其父元素來設置字體大小的，這樣就會存在一個(gè)問(wèn)題，進行任何元素設置，都有可(kě)能需要知道他父元素的大小。對于頁面中(zhōng)有多種字體大小的不适合；而rem是相對于根元素<html>，這樣就意味着，我們隻需要在根元素确定一個(gè)參考值。

rem：是基于一個(gè)根尺寸，最小隻能設置12px，在media中(zhōng)指定不同分辨率下(xià)的根尺寸所有尺寸都以它為基準計算；用rem的好處是你(nǐ)寫樣式的時候長度隻需要寫一次，而且在開發工具上安裝rem和(hé)px的轉換工具可(kě)以自動(dòng)轉換，(在4.7屏幕設置基準值為16px是一個(gè)比較好的轉換值,這樣5.2為18,5.7為20,6.2為22)

（2）什麼是屏幕尺寸、屏幕分辨率、屏幕像素密度？

屏幕尺寸：指屏幕的對角線的長度，單位是英寸，1英寸=2.54厘米。常見的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、4.7、5.0、5.2、5.5、5.7、6.0等。目前基本上是4.7起的屏幕

屏幕分辨率：指在橫縱向上的像素點數，單位是px，1px=1個(gè)像素點。一般以縱向像素*橫向像素來表示一個(gè)手機的分辨率，如(rú)1960*1080（紅色點）藍色點為1dp

屏幕像素密度：屏幕上每英寸可(kě)以顯示的像素點的數量，單位是dpi或ppi。在單一變化條件下(xià)，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

最明顯的就是iPhone 3GS和(hé)iPhone 4的區别。屏幕尺寸一樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

計算像素密度的公式：

勾股定理算出對角線的分辨率：√(1920^2+1080^2)≈2203px

對角線分辨率除以屏幕尺寸：2203/5≈440dpi。

（3）什麼是dp、sp、ppi、dpi、dip、mdpi、hdpi、xdpi、xxdpi？

這些單位主要用于手機app使用，對于手機web頁面并不識别

ppi和(hé)dpi：屏幕上每英寸可(kě)以顯示的像素點的數量，即屏幕像素密度。ppi和(hé)dpi是同一個(gè)概念，Android比較喜歡使用dpi，iOS比較喜歡使用ppi。

dp、dip：都是密度獨立像素，可(kě)以想象成是一個(gè)物理尺寸，使同樣的設置在不同手機上顯示的效果看起來是一樣的。

mdpi、hdpi、xdpi、xxdpi：

像素密度：簡單點就是非高清屏、高清屏、超高清屏。（dpi值越大越清晰）

dpi和(hé)轉換參數的關(guān)系:

dpi我們都知道，是指像素密度；轉換參數是指，dp與px之間的轉換系數。

如(rú)下(xià)圖，dp指藍色塊，px指紅色塊，很明顯密度更大的右圖中(zhōng)每個(gè)dp含有的px個(gè)數更多。可(kě)以得出結論：dpi密度越大，轉換參數越大。 dp = （DPI/（160像素/英寸））px

所以對于不同分辨率的值dp也是固定的

對于apk最好使用的單位是dp而對于手機web頁面最好使用的是rem

并且假設pc端和(hé)手機端的交互和(hé)頁面設計變動(dòng)不大的情況下(xià)使用rem完全可(kě)以隻寫一套頁面，一套樣式

對于手機端設計的圖标通(tōng)常分辨率會是2倍圖或者3倍圖來做的，這點要問(wèn)清設計師(shī)

并且這段 meta标簽很重要

<metaname="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">

user-scalable：用戶是否可(kě)手動(dòng)縮放

width=device-width：設置像素和(hé)屏幕等寬

initial-scale=1.0：像素寬度和(hé)屏幕寬度的比值

二、移動(dòng)端web開發的調試

1. chrome浏覽器(qì)的Toggle device toolbar調試工具可(kě)以模拟手機端的請求，對剛開始手機端頁面布局也有較好的幫助

2. chrome ToDevice插件，pc和(hé)手機登錄同一谷歌賬号，可(kě)将pc網頁地址推送至手機端，手機輸入網址太麻煩了

3. Hbulider 前端開發工具：做html頁面時使用該工具可(kě)以立即看到更改後的效果，對于調整頁面細節使用這個(gè)還原度100%。在手機浏覽器(qì)輸入在Hbulider生成的html頁面地址即可(kě)訪問(wèn)

4. 需要測試後台數據時倆中(zhōng)方式;手機root安裝host工具綁定host；pc上安裝Fiddler，設置端口号，手機上wifi設置中(zhōng)設置動(dòng)态代理，ip為pc的ip端口号為Fiddler設置的

5.調試js時：手機和(hé)電腦usb連接，手機開啟開發者模式，手機和(hé)電腦都安裝chrome浏覽器(qì)，手機chrome浏覽器(qì)打開，pc chrome上地址欄輸入：chrome://inspect/#devices；可(kě)在pc上控制手機chrome浏覽器(qì)的運行，手機chrome浏覽器(qì)上的事件響應可(kě)以反應到pc上，這樣就可(kě)以在pc端上調試手機上的web頁面了

開發時使用1+2+3基本就可(kě)以，當事件響應有差異時才需要使用5，前後端測試時使用4

三、移動(dòng)端web開發中(zhōng)一些兼容性做法

1. 手機端的按鈕複制功能兼容性比較好：clipboard.js

2. 禁止頁面自動(dòng)識别手機号碼：<metaname="format-detection" content="telephone=no">

3.禁止複制選中(zhōng)文(wén)本：Element {

-webkit-user-select: none;-moz-user-select: none;

-khtml-user-select: none;user-select: none;

}

3. ios系統輸入框陰影： -webkit-appearance: none;

4. a标簽的active兼容處理即僞類:active失效：<body ontouchstart="">

5. keyup進行表單驗證時手機對複制的内容無響應：手機對keyup、keydown、keypress支持不是很好，表單驗證時同時監聽keyup和(hé)input事件

對input type=’number’類型，maxlength無效，隻能通(tōng)過keyup動(dòng)态獲取長度多餘的去除，但是對于可(kě)輸入+-.這3個(gè)符号暫無比較好的處理方法；祛除number輸入框默認樣式：

input[type=number]{-moz-appearance:textfield;}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button{

-webkit-appearance: none;

appearance: none;

margin: 0;

}

6. 當input輸入框被軟鍵盤遮擋時：輸入框自動(dòng)往上彈，兼容性比較好的方法是：document.getElementById("account").scrollIntoView(true);鍵盤彈出時是個(gè)延時過程加載調用該方法時需增加延時，同時對body{margin-bottom:150px}，