自己第一次做手機(jī)web頁(yè)面的一些總結(jié)

發(fā)表時(shí)間：2017-5-22

發(fā)布人：葵宇科技

瀏覽次數(shù)：55

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

1. 單位

先來(lái)羅列下學(xué)習(xí)移動(dòng)頁(yè)面構(gòu)建的過(guò)程中可能看到過(guò)一些單位：

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

對(duì)上訴單位簡(jiǎn)單做個(gè)分類(lèi)，并對(duì)其中一些關(guān)系進(jìn)行比較

（1）什么是絕對(duì)長(zhǎng)度單位？什么是相對(duì)長(zhǎng)度單位？

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

網(wǎng)頁(yè)中應(yīng)用比較少。

相對(duì)長(zhǎng)度單位：是手機(jī)網(wǎng)頁(yè)設(shè)計(jì)中使用最多的長(zhǎng)度單位，包括rem、px、em等。

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

em:em是相對(duì)于其父元素來(lái)設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問(wèn)題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小。對(duì)于頁(yè)面中有多種字體大小的不適合；而rem是相對(duì)于根元素<html>，這樣就意味著，我們只需要在根元素確定一個(gè)參考值。

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

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

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

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

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

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

計(jì)算像素密度的公式：

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

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

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

這些單位主要用于手機(jī)app使用，對(duì)于手機(jī)web頁(yè)面并不識(shí)別

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

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

mdpi、hdpi、xdpi、xxdpi：

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

dpi和轉(zhuǎn)換參數(shù)的關(guān)系:

dpi我們都知道，是指像素密度；轉(zhuǎn)換參數(shù)是指，dp與px之間的轉(zhuǎn)換系數(shù)。

如下圖，dp指藍(lán)色塊，px指紅色塊，很明顯密度更大的右圖中每個(gè)dp含有的px個(gè)數(shù)更多。可以得出結(jié)論：dpi密度越大，轉(zhuǎn)換參數(shù)越大。 dp = （DPI/（160像素/英寸））px

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

對(duì)于apk最好使用的單位是dp而對(duì)于手機(jī)web頁(yè)面最好使用的是rem

并且假設(shè)pc端和手機(jī)端的交互和頁(yè)面設(shè)計(jì)變動(dòng)不大的情況下使用rem完全可以只寫(xiě)一套頁(yè)面，一套樣式

對(duì)于手機(jī)端設(shè)計(jì)的圖標(biāo)通常分辨率會(huì)是2倍圖或者3倍圖來(lái)做的，這點(diǎn)要問(wèn)清設(shè)計(jì)師

并且這段 meta標(biāo)簽很重要

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

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

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

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

二、移動(dòng)端web開(kāi)發(fā)的調(diào)試

1. chrome瀏覽器的Toggle device toolbar調(diào)試工具可以模擬手機(jī)端的請(qǐng)求，對(duì)剛開(kāi)始手機(jī)端頁(yè)面布局也有較好的幫助

2. chrome ToDevice插件，pc和手機(jī)登錄同一谷歌賬號(hào)，可將pc網(wǎng)頁(yè)地址推送至手機(jī)端，手機(jī)輸入網(wǎng)址太麻煩了

3. Hbulider 前端開(kāi)發(fā)工具：做html頁(yè)面時(shí)使用該工具可以立即看到更改后的效果，對(duì)于調(diào)整頁(yè)面細(xì)節(jié)使用這個(gè)還原度100%。在手機(jī)瀏覽器輸入在Hbulider生成的html頁(yè)面地址即可訪問(wèn)

4. 需要測(cè)試后臺(tái)數(shù)據(jù)時(shí)倆中方式;手機(jī)root安裝host工具綁定host；pc上安裝Fiddler，設(shè)置端口號(hào)，手機(jī)上wifi設(shè)置中設(shè)置動(dòng)態(tài)代理，ip為pc的ip端口號(hào)為Fiddler設(shè)置的

5.調(diào)試js時(shí)：手機(jī)和電腦usb連接，手機(jī)開(kāi)啟開(kāi)發(fā)者模式，手機(jī)和電腦都安裝chrome瀏覽器，手機(jī)chrome瀏覽器打開(kāi)，pc chrome上地址欄輸入：chrome://inspect/#devices；可在pc上控制手機(jī)chrome瀏覽器的運(yùn)行，手機(jī)chrome瀏覽器上的事件響應(yīng)可以反應(yīng)到pc上，這樣就可以在pc端上調(diào)試手機(jī)上的web頁(yè)面了

開(kāi)發(fā)時(shí)使用1+2+3基本就可以，當(dāng)事件響應(yīng)有差異時(shí)才需要使用5，前后端測(cè)試時(shí)使用4

三、移動(dòng)端web開(kāi)發(fā)中一些兼容性做法

1. 手機(jī)端的按鈕復(fù)制功能兼容性比較好：clipboard.js

2. 禁止頁(yè)面自動(dòng)識(shí)別手機(jī)號(hào)碼：<metaname="format-detection" content="telephone=no">

3.禁止復(fù)制選中文本：Element {

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

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

}

3. ios系統(tǒng)輸入框陰影： -webkit-appearance: none;

4. a標(biāo)簽的active兼容處理即偽類(lèi):active失效：<body ontouchstart="">

5. keyup進(jìn)行表單驗(yàn)證時(shí)手機(jī)對(duì)復(fù)制的內(nèi)容無(wú)響應(yīng)：手機(jī)對(duì)keyup、keydown、keypress支持不是很好，表單驗(yàn)證時(shí)同時(shí)監(jiān)聽(tīng)keyup和input事件

對(duì)input type=’number’類(lèi)型，maxlength無(wú)效，只能通過(guò)keyup動(dòng)態(tài)獲取長(zhǎng)度多余的去除，但是對(duì)于可輸入+-.這3個(gè)符號(hào)暫無(wú)比較好的處理方法；祛除number輸入框默認(rèn)樣式：

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. 當(dāng)input輸入框被軟鍵盤(pán)遮擋時(shí)：輸入框自動(dòng)往上彈，兼容性比較好的方法是：document.getElementById("account").scrollIntoView(true);鍵盤(pán)彈出時(shí)是個(gè)延時(shí)過(guò)程加載調(diào)用該方法時(shí)需增加延時(shí)，同時(shí)對(duì)body{margin-bottom:150px}，