移動Web頁面開發(fā)

一括蝠、移動開發(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。

image.png

CSS padding設(shè)置為 10rem
image.png

計算結(jié)果為160px

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末难礼,一起剝皮案震驚了整個濱河市娃圆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛾茉,老刑警劉巖讼呢,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異谦炬,居然都是意外死亡悦屏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來础爬,“玉大人散劫,你說我怎么就攤上這事∧环” “怎么了获搏?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長失乾。 經(jīng)常有香客問我现恼,道長冯挎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮于游,結(jié)果婚禮上诚镰,老公的妹妹穿的比我還像新娘坠韩。我一直安慰自己储笑,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布蜓氨。 她就那樣靜靜地躺著聋袋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪穴吹。 梳的紋絲不亂的頭發(fā)上幽勒,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天,我揣著相機(jī)與錄音港令,去河邊找鬼啥容。 笑死,一個胖子當(dāng)著我的面吹牛顷霹,可吹牛的內(nèi)容都是我干的咪惠。 我是一名探鬼主播,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼淋淀,長吁一口氣:“原來是場噩夢啊……” “哼遥昧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起绅喉,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤渠鸽,失蹤者是張志新(化名)和其女友劉穎叫乌,沒想到半個月后柴罐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡憨奸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年革屠,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡似芝,死狀恐怖那婉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情党瓮,我是刑警寧澤详炬,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站寞奸,受9級特大地震影響呛谜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜枪萄,卻給世界環(huán)境...
    茶點故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一隐岛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瓷翻,春花似錦聚凹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至对妄,卻和暖如春单旁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背饥伊。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工象浑, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人琅豆。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓愉豺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親茫因。 傳聞我的和親對象是個殘疾皇子蚪拦,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容