引言
眾所周知，在當今移動互聯網大行其道的現在，基本上所有的年輕人都是使用過手機去瀏覽一些網站的資訊或者使用過手機去購物網站支付買過東西，但是大家有沒有想過這樣的網頁是怎樣改制作出來的呢？今天我們就來探討一下這個問題
閱讀讀者具備基礎
1、熟練的使用HTML和CSS
2、對HTML5和CSS3有一定的了解，這個不必深入
3、掌握JavaScript、jquery腳本語言
如果還不能具備以上基礎的讀者們建議你們還是去網上找一下其他的一些相關的教學貼看一看，要不然可能會跟不上下面的學習了
HTML的特殊用法
首先我們先來講解一下HTML中一些特殊的語法，可能對於還是HTML入門級的新手來說可能沒見過，但是如大神那么請跳過這個模塊
那么我們就先從這張圖片說起：
相信這張圖片大家一定是不會陌生的，沒錯這個就是淘寶網的標題欄，其中的紅色邊框標出來的圖標在這里是相當的搶眼，但是你知道這個是怎樣制作的嗎？
首先我們要准備一張，淘寶的logo圖標，這張我們可以直接從百度上下載，下載地址
下載完成之后我們要將圖片的格式轉換成為ico格式，這個直接在網上查找轉換工具就好了，地址
生成后將圖片下載下來，重命名為taobaoLogo，新建一個HTML的項目，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘寶仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > </head> <body> </body> </html>
運行的結果如下：
從這個例子中我們可以發現，只要添加上依據語句就可以實現這個效果了，但是在實際的使用中，我們還需要添加上另一句語句，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淘寶仿制</title> <link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" > <link rel="icon" style="image/x-icon" href="taobaoLogo.ico"> </head> <body> </body> </html>
運行的效果也是一樣的
這里，細心的讀者可能會問既然效果都是一樣的，那么為什么要多此一舉呢， 這樣做當然有這樣做的必要，詳見這篇文章，在此就不必啰嗦了
其中一般這個Logo圖標不但可以運用在標題中，而且還可以放在收藏夾中去使用，只需要將添加標題欄中rel="short icon"改為rel="bookmark"即可
<link rel="bookmark" style="image/x-icon" href="taobaoLogo.ico">
在手機網頁的制作上，我們一般是不讓用戶手動的去改變頁面的大小的，所以下面的這一句是必須加上的
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
除了上面的這一句，下面的這些也是制作手機頁面必須加上的
<!--開啟對web app的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--主要是正對蘋果手機將數字自動識別為號碼--> <meta name="format-detection" content="telephone=no" />
除此之外，還有其他一些的屬性供你自由的選擇
<!-- 忽略識別郵箱，主要是針對安卓手機會自動將符合郵箱格式的字符串識別為郵箱地址--> <meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /> <!-- 添加智能 App 廣告條 Smart App Banner：告訴瀏覽器這個網站對應的app，並在頁面上顯示下載banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html --> <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no">
獲取滾動條的滾動值
window.scrollY window.scrollX
桌面瀏覽器中想要獲取滾動條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會發現這兩 個屬性是未定義的，為什么呢？因為在iOS中沒有滾動條的概念，在Android中通過這兩個屬性可以正常獲取到滾動條的值，那么在iOS中我們該如何獲 取滾動條的值呢？就是上面兩個屬性，但是事實證明android也支持這屬性，所以索性都用woindow.scroll.
禁止用戶選擇文本
-webkit-user-select:none
這個屬性是禁止用戶選擇文本，對安卓和蘋果都是有效的
淺談一下box-sizing
這個屬性可能大家比較陌生吧， 因為這個屬性是是CSS3中新加入的，為了實現一種我們平時 比較難實現的效果設定的屬性
例如：我們在手機布局的時候，一般我們是采用百分比來對網頁進行自適應的處理，也就是我們所說的自適應布局，我們可能有時會想要中效果就是，在左右內縮加上1px
div{ padding-left:1px; padding-right:1px; }
但是采用自適應布局會出現把屏幕撐開，從而出現橫向滾動條的效果，這個是我們在手機網頁中開發的大忌，所以這個時候box-sizing就解決了我們的問題，具體的文法詳見http://www.w3school.com.cn/cssref/pr_box-sizing.asp
從box-sizing這個屬性中我又聯想到還有另外一個與box有關的屬性就是box-shadow
box-shadow
這個屬性雖然在手機網頁中不是很常見，但是在網頁中確實比較常見的，原因是移動端的網頁顯示的比較小，相對來說比較簡潔，但是這個效果卻是極好的，自從有了這個特性以后，望門就可以將網頁是的特定元素實現得更具立體感，完成以前的一些沒有辦法實現的效果，具體詳見：http://www.w3school.com.cn/cssref/pr_box-shadow.asp
base64編碼圖片代替URL圖片
由於在網頁加載的時候，沒一張圖片，都要進行HTTP資源請求，所以將圖片進行編碼，減小單次請求的流量，從而加快網站的加載速度，這個的實現可以使用在線的編碼工具即可，地址：
http://www.fishlee.net/Tools/GetImageBase64Code#codeResult
移動端特殊的事件
在HTML5出現之后，有一些新的事件
- touchstart //當手指接觸屏幕時觸發
- touchmove //當已經接觸屏幕的手指開始移動后觸發
- touchend //當手指離開屏幕時觸發
- touchcancel//當某種touch事件非正常結束時觸發
執行事件的順序：touchstart>touchmove>touchend>touchcanel>click
從上面的順序我們不難分析出：在點擊的時候，click會發生延遲，這樣的延遲一般是300ms。
手機圖片和視頻上傳
<!-- 選擇照片 --> <input type=file accept="image/*"> <!-- 選擇視頻 --> <input type=file accept="video/*">
移動端不同的input對應不同的鍵盤
ios —- android
type email
type url
type search
動畫特效開啟加速
默認的移動瀏覽器是不會開啟動畫效果硬件加速的，但是這樣的效果在低端的安卓手機中可能會出現意想不到的反效果
動畫加速可以采用，下列代碼
.div { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ }
設置placeholder時候 focus時候文字沒有隱藏
input:focus::-webkit-input-placeholder{ opacity: 0; }
android局部滾動時隱藏原生滾動條
::-webkit-scrollbar{ opacity: 0; }
除此之外，還有像HTML5 中的API和重力感應事件等等的新特性的加入，使得HTML5網頁的開發變得越發的多功能性，但是這些在今天的布局上局不講了，以后還會繼續討論下去
布局方法
在手機網頁開發中，由於是基於webkit引擎開發的，所以我們可以大量的使用HTML5特性進行開發，布局上為了達到適屏的效果，我們需要進行采用的一般是百分比的布局，但是也是有一些布局較為特殊，這個我們就不討論了，后續會有一篇講解布局實例的文章，敬請期待
特別說明如需轉載請注明出處，同時如果你覺得贊，請為我點一下“推薦”，你的鼓勵是我前進的動力
參考文獻