手機網頁佈局經驗總結

時間 2019-11-13

標籤手機網頁佈局經驗總結欄目 HTML 简体版

原文原文鏈接

引言css

衆所周知，在當今移動互聯網大行其道的如今，基本上全部的年輕人都是使用過手機去瀏覽一些網站的資訊或者使用過手機去購物網站支付買過東西，可是你們有沒有想過這樣的網頁是怎樣改制做出來的呢？今天咱們就來探討一下這個問題html

閱讀讀者具有基礎html5

一、熟練的使用HTML和CSSjquery

二、對HTML5和CSS3有必定的瞭解，這個沒必要深刻android

三、掌握JavaScript、jquery腳本語言ios

若是還不能具有以上基礎的讀者們建議大家仍是去網上找一下其餘的一些相關的教學貼看一看，要否則可能會跟不上下面的學習了web

HTML的特殊用法windows

首先咱們先來說解一下HTML中一些特殊的語法，可能對於仍是HTML入門級的新手來講可能沒見過，可是如大神那麼請跳過這個模塊瀏覽器

那麼咱們就先從這張圖片提及：app

相信這張圖片你們必定是不會陌生的，沒錯這個就是淘寶網的標題欄，其中的紅色邊框標出來的圖標在這裏是至關的搶眼，可是你知道這個是怎樣製做的嗎？

首先咱們要準備一張，淘寶的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特性進行開發，佈局上爲了達到適屏的效果，咱們須要進行採用的通常是百分比的佈局，可是也是有一些佈局較爲特殊，這個咱們就不討論了，後續會有一篇講解佈局實例的文章，敬請期待

特別說明如需轉載請註明出處，同時若是你以爲贊，請爲我點一下「推薦」，你的鼓勵是我前進的動力

參考文獻

Meta 標籤與搜索引擎優化

移動web問題小結

用CSS開啓硬件加速來提升網站性能

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。