移動端web頁面前端開發總結

時間 2020-05-28

標籤移動 web 頁面前端開發總結欄目無線简体版

原文原文鏈接

移動web在當今的發展速度是一日千里，做爲移動領域的門外漢，在這段時間經過小碼哥不斷地接觸後，發現移動前端開發這一塊應作一個小小的總結來時刻用來溫習。說實話，對於移動端前端開發，小碼哥至今都看它爲一個全新的領域來對待的。麼辦法嘛，，，不過，幸虧小碼哥看到下面一個大概介紹移動端web前端開發的文章，但願對碼友們有所幫助。嘎嘎javascript

1.四大瀏覽器內核php

1.Trident (IE瀏覽器) :由於在早期IE佔有大量的市場份額，因此之前有不少網頁是根據這個Trident的標準來編寫的，可是實際上這個內核對真正的網頁標準支持不是很好，同時存在許多安全Bug。css

2.Gecko:( FireFox )優勢就是功能強大、豐富，能夠支持不少複雜網頁效果和瀏覽器擴展接口，缺點是消耗不少的資源，好比內存。html

3.Webkit: ( Chrome/ Safari / UC )優勢就是Webkit擁有清晰的源碼結構、極快的渲染速度，缺點是對網頁代碼的兼容性較低，會使一些編寫不標準的網頁沒法正確顯示。前端

4.Presto: ( 歐朋 ) Presto內核被稱爲公認的瀏覽網頁速度最快的內核，同時也是處理JS腳本最兼容的內核，能在Windows、Mac及Linux操做系統下完美運行。html5

移動端開發主要對象是手持設備，其中絕大部分是IOS和Android系統，基於Webkit內核，可以使用Chrome瀏覽器調試便可。java

2.手機瀏覽器android

瀏覽器已經逐漸從傳統桌面轉向手機端，競爭也愈來愈激烈。目前國內市場主流的手機瀏覽器：UC、百度、歐朋、QQ、海豚、safari、Chrome，這些瀏覽器都是基於webkit內核的，兼容性方面不存在問題，同時對html5和css3的支持很好，因此，大膽地應用html5和css3技術吧。css3

在開始編寫webapp時，前端工程師使用HTML5，而放棄HTML4，由於HTML5能夠實現一些HTML4中沒法實現的豐富的WEB應用程序的體驗，能夠減小開發者不少的工做量，固然了你決定使用HTML5前，必定要對此很是熟悉，要知道HTML5的新標籤的做用。好比定義一塊內容或文章區域可以使用section標籤，定義導航條或選項卡能夠直接使用nav標籤等等。web

3.終端分辨率

手機分辨率比PC分辨率要龐雜得多，各類分辨率有木有？大小差距那麼大有木有？這在必定程度上給頁面製做帶來了不小的麻煩。因此針對這樣的因素，必須有充分的考慮。考慮到瀏覽器自適應，須要設計和製做完成各類不一樣的方法。

1) 市場上主流手機生產商的產品分辨率。通過調研發現，目前主流的手機分辨率爲：480*800像素、320*480像素，而1280*720像素（720P）會是接下來的趨勢。這些都是很粗略的統計，要有精確的數據須要花費很多的精力，那是數據分析人員的工做。

2) 項目目標羣所持設備的分辨率。項目目標羣即用戶，用戶擁有什麼樣的手機分辨率，從必定程度上來講比第一點來得更加劇要，它決定着項目開發的方向。

4.響應式web開發

在編寫CSS時，我不建議前端工程師把容器（無論是外層容器仍是內層）的寬度定死。爲達到適配各類手持設備，我建議前端工程師使用自適應佈局模式（支付寶採用了自適應佈局模式），由於這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示，你無需再次考慮設備的分辨率。

響應式web開發不是一項開創性的技術變革，簡單地說，響應式web設計採用了媒體查詢、流式佈局、液態圖片三項技術，把它們組合在一塊兒來製做頁面，使得頁面不僅在傳統桌面，在平板電腦和手機上，各類不一樣的分辨率都可以完美顯示。而要作到這點，我以爲不難，請繼續往下：

1) 準備工做：

a) 插件安裝：window resize。您能夠經過如下連接 https://chrome.google.com/webstore/search-extensions/window%20resize下載安裝谷歌瀏覽器插件，安裝成功後，當您調整瀏覽器窗口時，在瀏覽器右下角會有灰度提示當前窗口和相似於手機視口的大小提示。截圖以下：

b) 編輯器安裝：subline Text2（支持html5，安裝css3擴展失敗）、topStyle5（支持css3）。

c) 弄清視口和屏幕的區別。視口是瀏覽器的內容顯示區域，屏幕是設備的物理顯示區域。好比視口寬度咱們通常用width表示，而屏幕寬度是用device-width來表示。相信作過手機頁面的童鞋都常常見過這段代碼：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其中width=device-width就是說把頁面寬度設置成和屏幕寬度同樣。

d) 響應式設計創意網站收集：http://www.561.cn 。這裏有不少響應式Web設計的網站，供您參考和學習。

2) 征途ING：

e) 響應式web設計之媒體查詢：

爲了減小http請求，我想在css樣式表裏進行媒體查詢會是個不錯的選擇，而不是在頁面head部分使用link進行加載。樣式表裏的媒體查詢格式爲：

@media screen and (max-width:960px){}

大括號內部書寫樣式。該語句至關於判斷語句，有兩個條件，一個是視口寬度最大不超過960px，screen表明顯示屏，這兩個條件都具有了，就調用大括號內的樣式。

f) 響應式web設計之流式佈局：

流式佈局以百分比進行佈局。最重要是時刻關注元素的父級層，全部的元素都是以父級層爲基準。流式佈局的應用是爲了和媒體查詢完美地結合，造成平滑的佈局變化跳轉效果。通常而言，media裏的樣式多以width、padding、margin、font-size、line-height這些爲主。

g) 響應式web設計之液態圖片：

要實現液態圖片，只需加入以下代碼：img{max-width:100%;}

web移動頭部書寫1

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

</head>

一、首先咱們來看看webkit內核中的一些私有的meta標籤，這些meta標籤在開發webapp時起到很是重要的做用

這個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；

meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；

meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼

其餘注意問題

1.在項目開發過程當中能夠會遇到內容排列顯示的佈局，建議你放棄float，能夠直接使用display:block;

2.請保證將每條數據都放在一個a標籤中，爲什麼這樣作？由於在觸控手機上，爲提高用戶體驗，儘量的保證用戶的可點擊區域較大。

3.學會使用webkit-box。

咱們說過自適應佈局模式，有些同窗可能會問：如何在移動設備上作到徹底自適應呢？很感謝webkit爲display屬性提供了一個 "webkit-box" 的值，它能夠幫助前端工程師作到盒子模型靈活控制。

四、如何去除Android平臺中對郵箱地址的識別 看過iOS webapp API的同窗都知道iOS提供了一個meta標籤:用於禁用iOS對頁面中電話號碼的自動識別。在iOS中是不自動識別郵件地址的，但在Android平臺，它會自動檢測郵件地址，當用戶touch到這個郵件地址時，Android會彈出一個框提示用戶發送郵件，若是你不想Android自動識別頁面中的郵件地址，你不妨加上這樣一句meta標籤在head中

五、如何去除iOS和Android中的輸入URL的控件條 你的老闆或者PD或者交互設計師可能會要求你：可否讓咱們的webapp更加像nativeapp，我不想讓用戶看見那個輸入url的控件條？答案是能夠作到的。咱們能夠利用一句簡單的javascript代碼來實現這個效果

setTimeout(scrollTo,0,0,0);

請注意，這句代碼必須放在window.onload裏纔可以正常的工做，並且你的當前文檔的內容高度必須是高於窗口的高度時，這句代碼纔能有效的執行。

六、如何禁止用戶旋轉設備 我曾經也想禁止用戶旋轉設備，也想實現像某些客戶端那樣：只能在肖像模式或景觀模式下才能正常運行。但如今我能夠很負責任的告訴你：別想了!在移動版的webkit中作不到！至少Apple webapp API已經說到了：咱們爲了讓用戶在safari中正常的瀏覽網頁，咱們必須保證用戶的設備處於任何一個方位時，safari都可以正常的顯示網頁內容（也就是自適應），因此咱們禁止開發者阻止瀏覽器的orientationchange事件，看來蘋果公司的出發點是正確的，蘋果確實不是通常的蘋果。iOS已經禁止開發者阻止orientationchange事件，那Android呢？對不起，我沒有找到任何資料說Android禁止開發者阻止瀏覽器orientationchange事件，可是在Android平臺，確實也是阻止不了的。

七、如何檢測用戶是經過主屏啓動你的webapp

看過Apple webapp API的同窗都知道iOS爲safari提供了一個將當前頁面添加主屏的功能，按下iphone\ipod\ipod touch底部工具中的小加號，或者ipad頂部左側的小加號，就能夠將當前的頁面添加到設備的主屏，在設備的主屏會自動增長一個當前頁面的啓動圖標，點擊該啓動圖標就能夠快速、便捷的啓動你的webapp。從主屏啓動的webapp和瀏覽器訪問你的webapp最大的區別是它清除了瀏覽器上方和下方的工具條，這樣你的webapp就更加像是nativeapp了，還有一個區別是window對像中的navigator子對象的一個standalone屬性。iOS中瀏覽器直接訪問站點時，navigator.standalone爲false,從主屏啓動webapp時，navigator.standalone爲true，咱們能夠經過navigator.standalone這個屬性獲知用戶當前是不是從主屏訪問咱們的webapp的。在Android中歷來沒有添加到主屏這回事！

六、如何關閉iOS中鍵盤自動大寫 咱們知道在iOS中，當虛擬鍵盤彈出時，默認狀況下鍵盤是開啓首字母大寫的功能的，根據某些業務場景，可能咱們須要關閉這個功能，移動版本webkit爲input元素提供了autocapitalize屬性，經過指定autocapitalize="off"來關閉鍵盤默認首字母大寫。

********************分割線*************************

緩存控制

下面這行:

與下面一行有相同的效果:

某些 WAP 瀏覽器不支持用 <meta/> 標籤來控制緩存, 但它們確實知道 HTTP 頭 "Cache-Control: no-cache" 的意思. 這種狀況下, 解決方案是在服務器端的 HTTP 響應中設置 HTTP 頭.

HTTP刷新

注意的是這個 XHTML MP 例子中須要 <meta http-equiv="Cache-Control" content="no-cache"/>. 若是上述代碼沒被包含, WAP 瀏覽器將僅僅顯示緩存中的文檔的複本, 而不須要每次刷新都鏈接服務器.

某些 WAP 瀏覽器是不支持 HTTP 刷新的. 例如, HTTP 刷新在 Openwave 移動瀏覽器 6.2.2 版上運行良好, 但在 Nokia 移動瀏覽器 4.0 版, Sony Ericsson T610 和 T68i 移動電話模擬器上是不起做用的.

註釋

clearType字體

定義頁面尺寸

IE的使用:<META NAME="MobileOptimized" CONTENT="240">