引言

眾所周知，在當今移動互聯(lián)網(wǎng)大行其道的現(xiàn)在，基本上所有的年輕人都是使用過手機去瀏覽一些網(wǎng)站的資訊或者使用過手機去購物網(wǎng)站支付買過東西，但是大家有沒有想過這樣的網(wǎng)頁是怎樣改制作出來的呢？今天我們就來探討一下這個問題

閱讀讀者具備基礎

1、熟練的使用HTML和CSS

2、對HTML5和CSS3有一定的了解，這個不必深入

3、掌握JavaScript、jquery腳本語言

如果還不能具備以上基礎的讀者們建議你們還是去網(wǎng)上找一下其他的一些相關(guān)的教學貼看一看，要不然可能會跟不上下面的學習了

HTML的特殊用法

首先我們先來講解一下HTML中一些特殊的語法，可能對于還是HTML入門級的新手來說可能沒見過，但是如大神那么請?zhí)^這個模塊

那么我們就先從這張圖片說起：

相信這張圖片大家一定是不會陌生的，沒錯這個就是淘寶網(wǎng)的標題欄，其中的紅色邊框標出來的圖標在這里是相當?shù)膿屟?，但是你知道這個是怎樣制作的嗎？

首先我們要準備一張，淘寶的logo圖標，這張我們可以直接從百度上下載， 下載地址

下載完成之后我們要將圖片的格式轉(zhuǎn)換成為ico格式，這個直接在網(wǎng)上查找轉(zhuǎn)換工具就好了， 地址

生成后將圖片下載下來，重命名為taobaoLogo，新建一個HTML的項目，代碼如下：

運行的結(jié)果如下：

從這個例子中我們可以發(fā)現(xiàn)，只要添加上依據(jù)語句就可以實現(xiàn)這個效果了，但是在實際的使用中，我們還需要添加上另一句語句，代碼如下：

運行的效果也是一樣的

這里，細心的讀者可能會問既然效果都是一樣的，那么為什么要多此一舉呢， 這樣做當然有這樣做的必要，詳見 這篇文章 ，在此就不必啰嗦了

其中一般這個Logo圖標不但可以運用在標題中，而且還可以放在收藏夾中去使用，只需要將添加標題欄中rel="short icon"改為rel="bookmark"即可

在手機網(wǎng)頁的制作上，我們一般是不讓用戶手動的去改變頁面的大小的，所以下面的這一句是必須加上的

除了上面的這一句，下面的這些也是制作手機頁面必須加上的

除此之外，還有其他一些的屬性供你自由的選擇

獲取滾動條的滾動值

 window.scrollY window.scrollX

桌面瀏覽器中想要獲取滾動條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會發(fā)現(xiàn)這兩 個屬性是未定義的，為什么呢？因為在iOS中沒有滾動條的概念，在Android中通過這兩個屬性可以正常獲取到滾動條的值，那么在iOS中我們該如何獲 取滾動條的值呢？就是上面兩個屬性，但是事實證明android也支持這屬性，所以索性都用woindow.scroll.

禁止用戶選擇文本

-webkit-user-select:none

這個屬性是禁止用戶選擇文本，對安卓和蘋果都是有效的

淺談一下box-sizing

這個屬性可能大家比較陌生吧， 因為這個屬性是是CSS3中新加入的，為了實現(xiàn)一種我們平時 比較難實現(xiàn)的效果設定的屬性

例如：我們在手機布局的時候，一般我們是采用百分比來對網(wǎng)頁進行自適應的處理，也就是我們所說的自適應布局，我們可能有時會想要中效果就是，在左右內(nèi)縮加上1px

div{ padding-left:1px; padding-right:1px; }

但是采用自適應布局會出現(xiàn)把屏幕撐開，從而出現(xiàn)橫向滾動條的效果，這個是我們在手機網(wǎng)頁中開發(fā)的大忌，所以這個時候box-sizing就解決了我們的問題，具體的文法詳見 http://www.w3school.com.cn/cssref/pr_box-sizing.asp

從box-sizing這個屬性中我又聯(lián)想到還有另外一個與box有關(guān)的屬性就是box-shadow

box-shadow

這個屬性雖然在手機網(wǎng)頁中不是很常見，但是在網(wǎng)頁中確實比較常見的，原因是移動端的網(wǎng)頁顯示的比較小，相對來說比較簡潔，但是這個效果卻是極好的，自從有了這個特性以后，望門就可以將網(wǎng)頁是的特定元素實現(xiàn)得更具立體感，完成以前的一些沒有辦法實現(xiàn)的效果，具體詳見： http://www.w3school.com.cn/cssref/pr_box-shadow.asp

base64編碼圖片代替URL圖片

由于在網(wǎng)頁加載的時候，沒一張圖片，都要進行HTTP資源請求，所以將圖片進行編碼，減小單次請求的流量，從而加快網(wǎng)站的加載速度，這個的實現(xiàn)可以使用在線的編碼工具即可，地址：

http://www.fishlee.net/Tools/GetImageBase64Code#codeResult

手機拍照和上傳圖片

在HTML5中支持一些移動的新特性

移動端特殊的事件

在HTML5出現(xiàn)之后，有一些新的事件

執(zhí)行事件的順序：touchstart>touchmove>touchend>touchcanel>click

從上面的順序我們不難分析出：在點擊的時候，click會發(fā)生延遲，這樣的延遲一般是300ms。

手機圖片和視頻上傳

移動端不同的input對應不同的鍵盤

ios —- android

type email

type url

type search

動畫特效開啟加速

默認的移動瀏覽器是不會開啟動畫效果硬件加速的，但是這樣的效果在低端的安卓手機中可能會出現(xiàn)意想不到的反效果

動畫加速可以采用，下列代碼

.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網(wǎng)頁的開發(fā)變得越發(fā)的多功能性，但是這些在今天的布局上局不講了，以后還會繼續(xù)討論下去

布局方法

在手機網(wǎng)頁開發(fā)中，由于是基于webkit引擎開發(fā)的，所以我們可以大量的使用HTML5特性進行開發(fā)，布局上為了達到適屏的效果，我們需要進行采用的一般是百分比的布局，但是也是有一些布局較為特殊，這個我們就不討論了，后續(xù)會有一篇講解布局實例的文章，敬請期待

特別說明如需轉(zhuǎn)載請注明出處，同時如果你覺得贊，請為我點一下“推薦”，你的鼓勵是我前進的動力

參考文獻

Meta 標簽與搜索引擎優(yōu)化

移動web問題小結(jié)

用CSS開啟硬件加速來提高網(wǎng)站性能

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com