一括蝠、移動開發(fā)與PC開發(fā)網(wǎng)頁的區(qū)別
1.終端設(shè)備及瀏覽器
2.分辨率
3.視口
4.輸入特性(鼠標(biāo)鞠抑、鍵盤或觸摸)
二、移動瀏覽器包括內(nèi)置瀏覽器忌警、可下載瀏覽器搁拙、代理瀏覽器以及WebView
1.內(nèi)置瀏覽器
每部手機(jī)都有內(nèi)置瀏覽器,也就是說這個瀏覽器屬于固件法绵,通常時操作系統(tǒng)廠商開發(fā)的箕速。
平臺 | 內(nèi)置瀏覽器 | 備注 | |
---|---|---|---|
ios | Safari | ||
安卓 | 安桌Webkit或Chrome | ||
黑莓 | 黑莓Webkit | ||
Windows Phone | IE | ||
塞班 | 塞班Webkit | ||
Firefox OS | 火狐 | ||
Sailfish | 暫未命名 | 基于Gecko | |
S40 | 在老版本上是S400Webkit,在Asha上是Xpress | Xpress是基于Gecko的代理瀏覽器 | |
其他功能手機(jī) | Opera Mini朋譬、NetFront盐茎、UC Mini | Opera MiniUC Mini是代理瀏覽器 |
大多數(shù)內(nèi)置瀏覽器都被緊密集成到底層的操作系統(tǒng)中,也就是說徙赢,無法單獨(dú)升級瀏覽器字柠,例如,為了得到新的Safari版本就必須升級iOS狡赐。
2.可下載瀏覽器
有許多瀏覽器是用戶能夠下載并且自行安裝的窑业,Opera、Firefox枕屉、Chrome常柄、UC就是其中幾個重要的瀏覽器。
可下載瀏覽器相比內(nèi)置瀏覽器有一個優(yōu)勢搀擂,就是只要有了新版本就可以更新西潘。最新的和最棒的功能往往最先在可下載瀏覽器出現(xiàn),這也是為什么Web開發(fā)者趨向與喜歡Chrome哨颂、Opera還有Firefox秸架。
3.代理瀏覽器
代理瀏覽器相比渲染引擎能夠解析和執(zhí)行HTML、CSS和javaScript咆蒿。但并不是運(yùn)行在設(shè)備上东抹,而是在遠(yuǎn)程服務(wù)器上。這樣做是為了給用戶省錢沃测。代理服務(wù)器工作的步驟如下:
1.當(dāng)用戶請求一個頁面缭黔,他不會發(fā)送一個普通的HTTP請求,而是通過一個加密連接發(fā)送一個特殊的代理服務(wù)器蒂破。
2.代理服務(wù)器會發(fā)送正常的HTTP請求給用戶希望訪問的Web服務(wù)器馏谨。它會請求HTML,還有所有取得其他資源附迷,如CSS惧互、JavaScript和圖片等哎媚。
3.代理服務(wù)器包括一個渲染引擎,能夠正常渲染頁面喊儡。
4.代理服務(wù)器壓縮渲染的頁面拨与,成為該網(wǎng)站的某種圖片,既把它想象成一個PDF或一個圖形映射艾猜。它有連接熱點买喧,而且用戶也能選擇文本和稍微放大。
5.代理服務(wù)器同樣通過加密連接把這個文件發(fā)送到客戶端匆赃。
6.客戶端把文件展示給客戶淤毛,如果客戶單擊連接或這姓一些需要的代碼操作,就會重復(fù)執(zhí)行這些步驟算柳。
代理瀏覽器主要致力于為用戶省錢低淡,因為代理瀏覽器所有要做的事就是顯示靜態(tài)文件,允許單擊或輕觸連接瞬项,生成簡單的UI蔗蹋,所以他是輕量級的,甚至可以在低規(guī)格的手機(jī)上運(yùn)行滥壕,不需要用戶購買很貴的只能手機(jī)纸颜∈奁可是它也有缺點绎橘,就是沒有客戶端交互。雖然它支持Javascript唠倦,但是每次用戶觸發(fā)一個Javascript事件称鳞,客戶端就會發(fā)一個請求給服務(wù)器以獲得下一步指示。服務(wù)器執(zhí)行腳本稠鼻,如果有必要抓取新的資源冈止,然后返回更新后的頁面,對于客戶端來說就是一個全新的頁面候齿。
4.WebView
WebView事留給原生應(yīng)用的一個操作系統(tǒng)瀏覽器接口熙暴。例如:在一個Twitter客戶端里,當(dāng)用戶單擊了feed里的一個連接時客戶端可以調(diào)起平臺的Webview來顯示一個網(wǎng)頁慌盯。
大體上周霉,Web時獨(dú)立的程序,用了欸之瀏覽器很多底層的組件亚皂,但是在其他方面可能會有所不同俱箱。
三、移動開發(fā)測試瀏覽器
1.Emulation
Emulation模擬器中每項的含義及功能如下灭必。
Devuce:可以選擇要測試的設(shè)備及型號狞谱,單擊Protrait可以測試豎屏顯示的網(wǎng)頁乃摹,單擊Landscape可以測試橫屏顯示的網(wǎng)頁。
Emulate screen resolution:該選項前面有一個復(fù)選框跟衅,勾選后表示采用Emulation模擬移動網(wǎng)頁孵睬,不勾選就是不模擬移動環(huán)境,一般建議勾選与斤。
Resolution:設(shè)備像素
Device pixel ratio:設(shè)備像素比
Emulate mobile:模擬移動端特性肪康,一般需要勾選。
Emulate touch screen:模擬移動touch事件撩穿,一般需要勾選磷支。
Shrink to fit:以適當(dāng)尺寸適配,一般需要勾選
2.NetWork cinditions
NetWork cinditions界面中每項的含義及使用方式如下:
Disk cache:磁盤緩存食寡,默認(rèn)是不緩存的雾狈。
Network throttling:網(wǎng)絡(luò)節(jié)流,單擊后面的下拉菜單抵皱,可以選擇不同的網(wǎng)絡(luò)供開發(fā)者測試模擬善榛。
User agent spoofing:用戶代理商,可以選擇默認(rèn)代理商呻畸,或者自定義代理商移盆。
3.Sensors
Sensors界面中每項的含義及功能如下。
Emulate geolcation coordinates:是否需要模擬地理定位伤为。勾選這個復(fù)選框下面的兩個選項就會變成可編輯狀態(tài)咒循。一般這個功能會出現(xiàn)在徐婭地理定位,或是引用地圖的時候绞愚。
Lat:經(jīng)度
Lon:緯度
Emulate accelerrometer:模擬陀螺儀叙甸。手動改變?nèi)齻€軸上的值,右邊小框就會發(fā)生旋轉(zhuǎn)位衩。這個功能一般用于搖一搖等重力感應(yīng)的場景裆蒸。
α:設(shè)備繞Z軸旋轉(zhuǎn)的數(shù)值
β:設(shè)備繞X軸旋轉(zhuǎn)的數(shù)值
γ:設(shè)備繞Y軸旋轉(zhuǎn)的數(shù)值
其實我們在實際開發(fā)的時候不可能同時需要這么多項測試,一般變換設(shè)備型號糖驴、網(wǎng)絡(luò)僚祷、分辨率等即可。
四贮缕、移動端視口
1辙谜、移動的三種視口
1-1.布局視口
小屏幕移動設(shè)備(甚至大部分平板)的問題是,如果使用寬度和瀏覽器窗口寬度一樣會導(dǎo)致很丑陋的顯示效果跷睦。移動或平板瀏覽器通常的寬度為240px~640px筷弦,并且大多數(shù)設(shè)計桌面的網(wǎng)站寬度都大于800px,更多的時1024px。所以我們?yōu)樽烂嬖O(shè)計的寬度為30%的aside在手機(jī)上看起來將會非常窄烂琴。
1-2視覺視口
雖然獨(dú)立的布局視口很大程度上幫助了桌面網(wǎng)站過渡到手機(jī)上爹殊。但我們不能完全忽視移動設(shè)備上的屏幕尺寸。 q所以該說明一下視覺視口了奸绷。
視覺視口是用戶正在看到的網(wǎng)站的區(qū)域梗夸。用戶可以通過縮放來操作視覺視口,同時不會影響布局視口号醉。布局視口還是保持在原來的寬度反症。
1-3理想視口
布局視口的默認(rèn)寬度并不是一個理想的寬度。顯然用戶希望在進(jìn)入頁面時可以不需要縮放就可以有一個理想的瀏覽和閱讀尺寸畔派。理想視口仍是為移動端設(shè)備準(zhǔn)備的铅碍。只有手動添加meta視口標(biāo)簽方才生效。如果沒有meta視口標(biāo)簽线椰,那么布局將會維持它的默認(rèn)寬度胞谈。
如下代碼,告訴瀏覽器憨愉,布局視口的寬度應(yīng)該與理想視口的寬度一致烦绳。(一般來講我們都會將布局視口的寬度設(shè)為設(shè)備寬度一樣,然后使用css媒體查詢編寫一套針對移動端的展示方案配紫。)
<meta name="device" content="width=device-width">
定義理想視口是瀏覽器的工作径密,不是設(shè)備或操作系統(tǒng)的工作。
2躺孝、視口標(biāo)簽
meta視口標(biāo)簽存在的目的時讓布局是扣的尺寸和理想視口的尺寸匹配享扔,它是蘋果發(fā)明的,其他的手機(jī)和平板復(fù)制了它的大部分內(nèi)容括细。桌面瀏覽器不支持它伪很,因為他們沒有理想視口的概念戚啥。meta視口標(biāo)簽應(yīng)該放在文旦那個的head標(biāo)簽中奋单,并書寫為
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
在WebStorm編輯器中輸入meta:vp然后安tab鍵,就可以生meta視口標(biāo)簽及一些默認(rèn)屬性猫十,一般情況下直接使用這些默認(rèn)屬性览濒,不需要更改.
五、設(shè)備像素比
1.使用相對長度單位em布局頁面
em是CSS提供的測量類型尺寸
源自印刷界拖云,一個em表示一種特殊字體的大寫字母M的高度贷笛。在網(wǎng)頁上,一個em是網(wǎng)頁瀏覽器的基礎(chǔ)文本尺寸的高度宙项,它一般情況下是16px乏苦。然而,任何人都可以改變這個基礎(chǔ)尺寸的設(shè)置,因此1em對于有的人來說可能是16px汇荐,但是在其他人的瀏覽器上可能是24px洞就。換句話說,em是一個相對的度量單位掀淘。
除了瀏覽器的初始字號設(shè)置之外旬蟋,em也可以從包含標(biāo)簽中繼承尺寸信息。一個.9em的類型尺寸將使文本在大部分以16px為基礎(chǔ)尺寸的顯示器上為大約14px高革娄。但是如果你有一個帶.9em的字號的<p>標(biāo)簽倾贰,然后在這個<p>標(biāo)簽中有一個帶.9em的自豪的<strong>標(biāo)簽,這個<strong>標(biāo)簽的em尺寸就不是14px而是12px(16.9.9)拦惋。因此在使用em值時要記住繼承這個特性匆浙。
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸厕妖。
一般用法是吞彤,我們定義或瀏覽器的默認(rèn)全頁面的字體大小,當(dāng)然我贊同自己定義會比較好叹放,因為這樣就不會因為瀏覽器的原因而使頁面的字體大小變化導(dǎo)致頁面錯位饰恕。
所以我們可以一開始這樣定義
body{font-size:12px;}//當(dāng)然字體大小就自定了。
這是font-size的這個值便作為1em井仰,font-size的定義值可能作為一個參考值埋嵌,我們就可以根據(jù)這個參考值來使用em了,所以em就是所謂的相對長度單位了.
換算:
1.25em=1.25 * 12px=15px
如果記不住或不會換算的話俱恶,在線轉(zhuǎn)換的網(wǎng)站https://www.runoob.com/tags/ref-pxtoemconversion.html
2.使用相對長度單位rem布局網(wǎng)頁內(nèi)容
當(dāng)使用 rem 單位雹嗦,他們轉(zhuǎn)化為像素大小取決于頁根元素的字體大小,即 html 元素的字體大小合是。 根元素字體大小乘以你 rem 值了罪。·
例如,根元素的字體大小 16px聪全,10rem 將等同于 160px泊藕,即 10 x 16 = 160。
CSS padding設(shè)置為 10rem
計算結(jié)果為160px