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