移動Web開發常見問題

1、流式佈局

1.1 什麼是流式佈局

流式佈局就是百分比佈局，經過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充，同時會設定最小寬度和最大寬度，適用於圖片比較多的首頁、門戶、電商等。javascript

在這裏咱們以京東的M站爲例進行說明：css

top.png

nav.png

navs.png

能夠看到，在京東各個模塊的主容器中，都設置了最大最小寬度和寬度100%，而在導航區塊中，因爲一行有5個小區塊，因此設置了寬度爲20%，使得小區塊也能達到自適應的效果。html

1.2 viewport

在移動端用來承載網頁的這個區域就是咱們的視覺窗口viewport，這個區域能夠設置高度寬度，能夠按比例放大縮小，並且能設置是否容許用戶自行縮放。前端

viewport.jpg

width：設置的是viewport寬度，能夠設置device-width特殊值。
initial-scale：初始縮放比，大於0的數字，通常設置爲1.0。
maximum-scale：最大縮放比，大於0的數字。
minimum-scale：最小縮放比，大於0的數字。
user-scalable：用戶是否能夠縮放，yes或no（1或0）。

<!--視口標籤通可使用 meta:vp + tab 來快速生成，一般咱們能夠設置爲下邊這樣。--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>

1.3 移動端常見事件

1.3.1 touch事件

touchstart：當手指觸碰屏幕時候發生。無論當前有多少隻手指。
touchmove：當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動。
touchend：當手指離開屏幕時觸發。
touchcancel：系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用。

觸摸事件的響應順序：java

ontouchstart --> ontouchmove --> ontouchend --> onclick(300ms延時)。jquery

1.3.2 event事件

originalEvent：（原生事件）是jquery封裝的事件。�
targetTouches：目標元素的全部當前觸摸。
changedTouches：頁面上最新更改的全部觸摸。
touches：頁面上的全部觸摸。注意：在touchend事件的時候event只會記錄changedtouches。

2、響應式開發

2.1 響應式開發簡介

2.1.1 什麼是響應式開發

在移動互聯日益成熟的時候，咱們在桌面瀏覽器上開發的網頁已經沒法知足移動設備的閱讀。android

一般的作法是針對移動端單獨作一套特定的版本。ios

可是若是終端愈來愈多那麼你須要開發的版本就會愈來愈多（大屏移動設備普及）。web

那麼Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端。chrome

2.1.2 響應式開發的前景

如今的移動設備屏幕愈來愈大。

愈來愈多的設計師也採用了這種設計。

在新建站的一些網站如今廣泛採用的響應式開發。

那麼在前端開發當中也是一項必備的技能。

2.1.3 響應式開發的原理

CSS3中的Media Query（媒介查詢），經過查詢screen的寬度來指定某個寬度區間的網頁佈局。

超小屏幕：768px如下（移動設備）。
小屏設備：768px-992px。
中等屏幕：992px-1200px。
寬屏設備：1200px以上。

2.2 Bootstrap框架

2.2.1 Bootstrap簡介

官方網站
Bootstrap中文網
它是由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。它提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更爲個性化和人性化的完善，造成一套本身獨有的網站風格，併兼容大部分jQuery插件。
Bootstrap中包含了豐富的Web組件，根據這些組件，能夠快速的搭建一個漂亮、功能完備的網站。其中包括如下組件：下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。

2.2.2 Bootstrap經常使用樣式

container類：用於定義一個固定寬度且居中的版心。

<div class="topbar"> <div class="container"> <!-- 此處的代碼會顯示在一個固定寬度且居中的容器中 該容器的寬度會跟隨屏幕的變化而變化 --> </div> </div>

柵格系統：Bootstrap中定義了一套響應式的網格系統，其使用方式就是將一個容器劃分紅12列，而後經過col-xx-xx的類名控制每一列的佔比。
1. row類：
  - 由於每個列默認有一個15px的左右外邊距。
  - row類的一個做用就是經過左右-15px屏蔽掉這個邊距。
```
<div class="container"> <div class="row"></div> </div> 
```
2. col-xx-x類：
  - 第一個鏈接符後邊寫屏幕尺寸，有xs超小屏幕手機(<768px)、sm小屏幕平板 (≥768px)、md中等屏幕桌面顯示器(≥992px)、lg大屏幕大桌面顯示器 (≥1200px)四種。
  - 第二個鏈接符後邊表示對應的份數，佔12份中的幾份。
```
<div class="row"> <div class="col-md-2 text-center"></div> <div class="col-md-5 text-center"></div> <div class="col-md-2 text-center"></div> <div class="col-md-3 text-center"></div> </div> 
```

hidden類：設置在不一樣的屏幕下隱藏。

<div class="hidden-xs,hidden-sm,hidden-md,hidden-lg"> </div>

text-xx類：設置文字的對齊方式。

text-center   文本居中
text-left         文本左對齊
text-right    文本右對齊

pull-xx類：設置浮動。

pull-left         左浮動類
pull-right    右浮動類

center-block類：讓一個固定寬度的元素居中。

2.2.3 字體圖標

字體圖標：

@font-face { font-family: 'XXX'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff'); }

字體文件格式：
- eot：embedded-opentype
- svg：svg
- ttf：truetype
- woff：woff

2.2.4 輪播圖插件 Carousel

基本的輪播圖實現：

<!-- 如下容器就是整個輪播圖組件的總體， 注意該盒子必須加上 class="carousel slide" data-ride="carousel" 表示當前是一個輪播圖 bootstrap.js會自動爲當前元 素添加圖片輪播的特效 --> <div id="輪播圖的ID" class="carousel slide" data-ride="carousel"> <!-- ol標籤是圖片輪播的控制點 --> <ol class="carousel-indicators"> <!-- 每個li就是一個單獨的控制點 data-target屬性就是指定當前控制點控制的是哪個輪播圖，其目的是若是界面上有多個輪播圖，便於區分到底控制哪個 data-slide-to屬性是指當前的li元素綁定的是第幾個輪播項 注意，默認必須給其中某個li加上active，展現的時候就是焦點項目 --> <li data-target="#輪播圖的ID" data-slide-to="0" class="active"></li> <li data-target="#輪播圖的ID" data-slide-to="1"></li> <!-- ...更多的 --> </ol> <!-- .carousel-inner是全部輪播項的容器盒子， 注意role="listbox"表明當前div是一個列表盒子，做用就是給當前div添加一個語義 --> <div class="carousel-inner" role="listbox"> <!-- 每個.item就是單個輪播項目，注意默認要給第一個輪播項目加上active，表示爲焦點 --> <div class="item active"> <!-- 輪播項目中展現的圖片 --> ![](example.jpg) <div class="carousel-caption"> <!-- 標題或說明性文字，若是不須要，直接刪除當前div.carousel-caption --> </div> </div> <div class="item"> <!-- ... --> </div> <!-- ... --> </div> <!-- 圖片輪播上左右兩個控制按鈕，分別點擊能夠滾動到上一張和下一張 --> <!-- 此處須要注意的是 該a連接的href屬性必須指向須要控制的輪播圖ID --> <!-- 另外a連接中的data-slide="prev"表明點擊該連接會滾到上一張，若是設置爲next的話則相反 --> <a class="left carousel-control" href="#輪播圖的ID" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一張</span> </a> <a class="right carousel-control" href="#輪播圖的ID" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一張</span> </a> </div>

2.2.5 函數庫 underscoreJS

_.template：

<ol class="carousel-indicators"> <!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"> <!--渲染的HTML字符串--> </div>

/*取到模版當中的字符串*/ var pointTemplateStr = $('#point_template').html(); var imageTemplateStr = $('#image_template').html(); /*轉化成模版函數*/ var pointTemplate = _.template(pointTemplateStr); var imageTemplate = _.template(imageTemplateStr); /*傳入數據 解析成 html 字符*/ var pointHtml = pointTemplate({model:data}); var imageHtml = imageTemplate({model:data,isMobile:isMobile});//咱們只須要再加一個屬性 /*把html字符串渲染在頁面當中*/ $('.carousel-indicators').html(pointHtml); $('.carousel-inner').html(imageHtml);

<!--點模版--> <script type="text/template" id="point_template"> <%_.each(model,function(obj,i){%> <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=(i==0?'active':'')%>"></li> <%})%> </script> <!--圖片模版--> <script type="text/template" id="image_template"> <%_.each(model,function(obj,i){%> <div class="item <%=(i==0?'active':'')%>"> <% if(isMobile){ %> <a href="#" class="m_imgBox"> <img src="<%=obj.img%>" alt=""/> </a> <%} else {%> <a href="#" class="pc_imgBox" style="background-image:url(<%=obj.bac%>)"></a> <%}%> </div> <%})%> </script>

3、rem佈局

準備編輯這段時發現簡書上已經有做者寫了關於rem佈局的介紹，而且他的設置比我所用的更加簡潔，貼上地址供你們學習參考。
手機端頁面自適應解決方案—rem佈局進階版（附源碼示例）

4、移動web開發中的常見問題

4.1 移動端如何定義字體font-family?

三大手機系統的字體：�

iOS 系統：
- 默認中文字體是Heiti SC
- 默認英文字體是Helvetica
- 默認數字字體是HelveticaNeue
- 無微軟雅黑字體
Android 系統：
- 默認中文字體是Droidsansfallback
- 默認英文和數字字體是Droid Sans�
- 無微軟雅黑字體
Winphone 系統：
- 默認中文字體是Dengxian(方正等線體)
- 默認英文和數字字體是Segoeod
- 無微軟雅黑字體

各個手機系統有本身的默認字體，且都不支持微軟雅黑，如無特殊需求，手機端無需定義中文字體，使用系統默認英文字體和數字字體可以使用Helvetica，三種系統都支持。

/* 移動端定義字體的代碼 */ body{ font-family:Helvetica; }

4.2 移動端字體單位font-size選擇px仍是rem?

對於只須要適配手機設備，使用px便可。
對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。

rem配置參考：

html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } }

4.3 移動端touch事件(區分webkit和winphone)有哪些？

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件：

如下支持webkit：
- touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指。
- touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event``preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動。
- touchend——當手指離開屏幕時觸發。
- touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用。
如下支持winphone 8：
- MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指。
- MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action:none;}能夠阻止默認狀況的發生：阻止頁面滾動。
- MSPointerUp——當手指離開屏幕時觸發。

4.4 如何解決移動端click屏幕產生200-300ms的延遲響應問題？

移動設備上的web網頁是有300ms延遲的，每每會形成按鈕點擊延遲甚至是點擊失效。

解決方案：

fastclick能夠解決在手機上點擊事件的300ms延遲。
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題。

觸摸事件的響應順序：

ontouchstart
ontouchmove
ontouchend
onclick

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應。

4.5 什麼是Retina 顯示屏，帶來了什麼問題？

retina：一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個。

在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍。

那麼，前端的應對方案是：

設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2。

//例如圖片寬高爲：200px*200px，那麼寫法以下 .css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px。

.css{font-size:20px}

4.6 移動端如何取消touch高亮效果？

在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類:active的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來進行全局的禁止：

html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩。
```
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)} 
```
android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果。
```
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0;) -webkit-user-modify:read-write-plaintext-only; } 
```
-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符。

另外，有些機型去除不了，如小米2。對於此類問題還有個辦法，不使用a或者input標籤，直接用div標籤。
winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉？
```
<meta name="msapplication-tap-highlight" content="no"> 
```

4.7 關於webkit表單的幾個問題

webkit表單元素的默認外觀怎麼重置？
```
.css{-webkit-appearance:none;} 
```

webkit表單輸入框placeholder的顏色值能改變麼？

input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEE}

webkit表單輸入框placeholder的文字能換行麼？
```
iOS能夠，Android不行。 
```
如何禁止文本縮放�？

當移動設備橫豎屏切換時，文本的大小會從新計算，進行相應的縮放，當咱們不須要這種狀況時，能夠選擇禁止：
```
html { -webkit-text-size-adjust: 100%; } 
```
須要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設置meta viewport。

4.8 如何在移動端禁止用戶選中內容？

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

.user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移動端不須要） */ -ms-user-select: none; /* IE 10+ */ }

4.9 如何模擬按鈕的hover效果？

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下：

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue:active{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按鈕</div> <script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html> 兼容性ios5+、部分android 4+、winphone 8

要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名。

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body> <div class="btn-blue">按鈕</div> <script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){ this.className = "btn-blue" } </script> </body> </html>

4.10 屏幕旋轉的事件和樣式

事件：window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式。

window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; } }

樣式：

//豎屏時使用的樣式
@media all and (orientation:portrait) { .css{} } //橫屏時使用的樣式 @media all and (orientation:landscape) { .css{} }

4.11 移動端常見的一些功能

搖一搖功能：

HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。
手機拍照和上傳圖片：
```
<input type="file">的accept 屬性  <input type=file accept="image/*">  <input type=file accept="video/*"> 
```
使用總結：
1. iOS有拍照、錄像、選取本地圖片功能。
2. 部分android只有選取本地圖片功能。
3. winphone不支持。
4. input控件默認外觀醜陋。

消除transition閃屏：

.css{ /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-transform-style: preserve-3d; /*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/ -webkit-backface-visibility: hidden; }

開啓硬件加速：

解決頁面閃白。
保證動畫流暢。

.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

android上去掉語音輸入按鈕：

input::-webkit-input-speech-button {display: none}

4.12 如何禁止百度轉碼？

<meta http-equiv="Cache-Control" content="no-siteapp" />

4.13 怎樣默認優先使用最新版本IE和Chrome？

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

移動端開發來個總結吧