# 移動端開發
### 1. 1px問題如何解決
#### ①偽類 + transform（比較完美）
> 原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位
##### 單條border
```
.hairlines li{
position: relative;
border:none;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
```
##### 四條 border
```
.hairlines li{
position: relative;
margin-bottom: 20px;
border:none;
}
.hairlines li:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
```
> 樣式使用的時候，也要結合 JS 代碼，判斷是否 Retina 屏
```
if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('ul').className = 'hairlines';
}
```
#### ②淘寶M站是通過 viewport + rem 實現的（適合新項目，方便）
> lib-flexible的庫，而這個庫就是用來解決H5頁面終端適配的。
---
### 2.300ms延時問題
#### 產生原因
> 用戶在 iOS Safari 里邊點擊了一個鏈接。由于用戶可以進行雙擊縮放或者雙擊滾動的操作，當用戶一次點擊屏幕之后，瀏覽器并不能立刻判斷用戶是確實要打開這個鏈接，還是想要進行雙擊操作。因此，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。
- [ ] **于是，300 毫秒延遲就這么誕生了。**
#### 解決方案
1. 禁用縮放
```
```
> 這個解決方案看似完美，但也帶來一個明顯的缺陷 —— 你必須完全禁用縮放來達到目的，而從移動端站點的可用性和可訪問性來看，縮放是相當關鍵的一環。你很可能已經遇到過這個問題，即你想要放大一張圖片或者一段字體較小的文本，卻發現無法完成操作。
2. width=device-width Meta 標簽
```
```
- [x] **沒有雙擊縮放就沒有 300 毫秒點擊延遲。**
> 這一解決方案的另一個關鍵之處在于它只是去除了雙擊縮放，但用戶仍可以使用雙指縮放 (pinch to zoom)。可見，縮放功能并非被完全禁用，也就不存在可用性和可訪問性的問題了。
這是一個令人振奮的方案，很好地提升了移動端站點的性能。當然，主要的問題是 width=device-width 這一優化目前僅被 Chrome 32 所支持。
3.指針事件
> touch-action 的默認值為 auto，將其置為 none 即可移除目標元素的 300 毫秒延遲。例如，下面的代碼在 IE10 和 IE11 上移除了所有鏈接和按鈕元素的點擊延遲。
```
a[href], button {
-ms-touch-action: none; /* IE10 */
touch-action: none; /* IE11 */
}
```
> 你甚至可以在 元素上設置 touch-action: none，這就徹底禁用了雙擊縮放 (注：這也同時禁用了雙指縮放，因此也會帶來前面討論到的可訪問性和可用性問題。)
#### **目前的解決方案**
**①指針事件的 polyfill**
> 指針事件的 polyfill 比較多，以下列出比較流行的幾個。
- Google 的 Polymer
- 微軟的 HandJS
- @Rich-Harris 的 Points
> 為避免 300 毫秒點擊延遲，我們主要關心這些 polyfill 是如何在非 IE 瀏覽器中模擬 CSS touch-action 屬性的，這其實是一個不小的挑戰。由于瀏覽器會忽略不被支持的 CSS 屬性，唯一能夠檢測開發者是否聲明了 touch-action: none 的方法是使用 JavaScript 去請求并解析所有的樣式表。HandJS 也正是這么做的，但不管是從性能上來看還是其他一些復雜的方面，這都會遇到問題。
>?
> Polymer 則是通過判斷標簽上的 touch-action 屬性 (attribute)，而非 CSS 代碼。下面的代碼展示了 Polymer 是如何在鏈接上模擬 CSS touch-action: none 屬性的。
```
```
**②FastClick**
> FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到 touchend 事件的時候，會通過 DOM 自定義事件立即觸發一個模擬 click 事件，并把瀏覽器在 300 毫秒之后真正觸發的 click 事件阻止掉。
```
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
```
> attach() 方法雖可在更具體的元素上調用，直接綁定到 上可以確保整個應用都能受益。當 FastClick 檢測到當前頁面使用了基于 標簽或者 touch-action 屬性的解決方案時，會靜默退出。可以說，這是真正的跨平臺方案出來之前一種很好的變通方案。
**③Kendo UI Mobile**
> 最后一點，如果你是 Kendo UI Mobile 的用戶，那你完全不必擔心上述問題。一個自定義的點擊延遲解決方案已經作為 Touch widget 的一部分打包好了。這個 touch widget 是一個跨平臺的 API，幫助處理所有平臺的用戶點擊事件，所有的 Kendo UI Mobile 組件都會默認調用它。
### 3.點擊穿透問題
**什么是點擊穿透？**
> 假如頁面上有兩個元素A和B。B元素在A元素之上。我們在B元素的touchstart事件上注冊了一個回調函數，該回調函數的作用是隱藏B元素。我們發現，當我們點擊B元素，B元素被隱藏了，隨后，A元素觸發了click事件。
> 這是因為在移動端瀏覽器，事件執行的順序是**touchstart > touchend > click**。而click事件有300ms的延遲，當touchstart事件把B元素隱藏之后，隔了300ms，瀏覽器觸發了click事件，但是此時B元素不見了，所以該事件被派發到了A元素身上。如果A元素是一個鏈接，那此時頁面就會意外地跳轉。
**解決方案**
（1）遮擋
> 由于 click 事件的滯后性，在這段時間內原來點擊的元素消失了，于是便“穿透”了。因此我們順著這個思路就想到，可以給元素的消失做一個fade效果，類似jQuery里的fadeOut，并設置動畫duration大于300ms，這樣當延遲的 click 觸發時，就不會“穿透”到下方的元素了。
> 同樣的道理，不用延時動畫，我們還可以動態地在觸摸位置生成一個透明的元素，這樣當上層元素消失而延遲的click來到時，它點擊到的是那個透明的元素，也不會“穿透”到底下。在一定的timeout后再將生成的透明元素移除
（2）pointer-events
pointer-events是CSS3中的屬性，它有很多取值，有用的主要是auto和none，其他屬性值為SVG服務。
|取值 | 含義|
|:---:|:-----:|
auto | 效果和沒有定義 pointer-events 屬性相同，鼠標不會穿透當前層。
none | 元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會監聽這個子元素的。
- [ ] 因此解決“穿透”的辦法就很簡單，demo如下
```
$('#closePopup').on('tap', function(e){
$('#popupLayer').hide();
$('#bgMask').hide();
$('#underLayer').css('pointer-events', 'none');
setTimeout(function(){
$('#underLayer').css('pointer-events', 'auto');
}, 400);
});
```
（3）fastclick
```
FastClick.attach(document.body);
```
> 從此所有點擊事件都使用click，不會出現“穿透”的問題，并且沒有300ms的延遲。
### 4.移動端兼容問題
1. IOS移動端click事件300ms的延遲相應（上面已有解決方案）
2. 一些情況下對非可點擊元素（label，span）監聽click事件，iso下不會觸發！
> css增加cursor：pointer就搞定了
3. h5底部輸入框被鍵盤遮擋問題
> h5頁面當輸入框在最底部，點擊軟鍵盤后輸入框會被遮擋。可采用如下方式解決
```
var oHeight = $(document).height(); //瀏覽器當前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
```
4. 不讓 Android 手機識別郵箱
```
?
```
5. 禁止 iOS 識別長串數字為電話
```
```
6. 禁止 iOS 彈出各種操作窗口
```
-webkit-touch-callout:none
```
7. 消除 transition 閃屏
```
-webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility: hidden; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/
```
8. iOS 系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格
```
可以通過正則去掉 this.value = this.value.replace(/\u2006/g, '');
```
9. 禁止ios和android用戶選中文字
```
-webkit-user-select:none
```
10. CSS動畫頁面閃白,動畫卡頓
> 解決方法:
- 1.盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
- 2.開啟硬件加速
```
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
```
11. fixed定位缺陷
> - ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
> - android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
> - ios4下不支持position:fixed
> - 解決方案： 可用iScroll插件解決這個問題
12. localStorage/sessionStorage
> PC端,這兩個API在低版本的IE下是沒有,所以是需要用try..catch包裹的.
> 在移動端,我剛剛開始是不加的,所測試的手機也沒問題.但是現在很多瀏覽器有無痕模式,這個模式下,localStorage相關的API時禁用的.所以使用時,還是要保證代碼的健壯性
13. 在ios和andriod中,audio元素和video元素在無法自動播放
> 應對方案：觸屏即播
```
$('html').one('touchstart',function(){
audio.play()
})
```
14. ios下取消input在輸入的時候英文首字母的默認大寫
```
```
15. 阻止旋轉屏幕時自動調整字體大小
```
html,?
body,?
form,?
fieldset,?
p,?
div,?
h1,?
h2,?
h3,?
h4,?
h5,?
h6 {
-webkit-text-size-adjust:none;
}
```
16. Input 的placeholder會出現文本位置偏上的情況
```
input 的placeholder會出現文本位置偏上的情況：PC端設置line-height等于height能夠對齊，
而移動端仍然是偏上，解決是設置line-height：normal
```
17. 往返緩存問題
```
點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關系。
解決方法 ：window.onunload = function(){};
```
18. 在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效
```
* {-webkit-tap-highlight-color:rgba(0,0,0,0);}
```
> 不過這個方法在現在的安卓瀏覽器下，只能去掉那個橙色的背景色，點擊產生的高亮邊框還是沒有去掉，有待解決！
19. ios滾動不流暢
```
overflow: scroll;
-webkit-overflow-scrolling: touch;/* 解決ios滑動不流暢問題 */
```
20. h5移動端，當input輸入框喚起虛擬鍵盤時，fixed定位的元素帶來的布局問題
- 問題1：H5 web 移動端，input輸入框喚起鍵盤時。fixed定位好的元素跟隨頁面滾動， fixed屬性失效，滿屏任性橫飛。
- 問題2：使用第三方輸入法的ios手機，會出現鍵盤彈出延遲，導致普通布局的輸入框(input/textarea等) 位置靠下的元素被鍵盤擋住
```
// CSS
.scrollWrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
}
bottomInput {
position: absolute;
bottom:0;
left:0;
right: 0;
}
// HTML
// javascript
// 在輸入框獲取焦點, 鍵盤彈起后, 真的是一行代碼
var interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100)
```
### 5.css3動畫
```
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
```
**同時要配合** @keyframes
```
@keyframes name {
form {
}
to {
}
}
```
- [x] animation 參數說明
- name
> 與 @keyframes 后 name 一致，動畫名稱
- duration
> 一個動畫持續的事件，要帶單位 s/ms
- timing-function
> 動畫的速度曲線，又稱之為緩動類型。
> 1. liner 動畫從頭到位速度相同，一般用于平滑的效果
> 1. ease 默認值，逐漸變慢
> 1. ease-in 加速
> 1. ease-out 減速
> 1. ease-in-out 先加速再減速
> 1. cubic-bezier 自定義貝塞爾曲線
> 1. 除此之外還有個重要的值，step-start，可以實現一幀一幀播放的效果，在特殊場景有更好的效果
- delay
> 動畫延遲執行的時間，需要單位 s/ms
- iteration-count
> 動畫迭代的次數，可以設置具體的數值，默認值1，使用 infinite 關鍵字可以實現動畫不間斷播放
- direction
> 動畫的前進方向，默認為 normal，代表正向播放，使用值 alternate，可以實現動畫完成時的倒帶效果
- fill-mode
> 填充模式，指的是動畫的每個周期間的狀態，通常使用默認值 none [這篇文章有很好的解釋](http://www.zhangxinxu.com/wordpress/2013/06/css3-animation-%E7%82%B9%E7%82%B9%E7%82%B9%E7%AD%89%E5%BE%85%E6%8F%90%E7%A4%BA%E6%95%88%E6%9E%9C/)
- play-state
> 控制動畫的運行狀態，默認為 running，可選值 paused
- [ ] 例子demo
- 外層圓圈
```
.circle {
...
animation: scale 2s ease infinite normal;
}?
@keyframes scale {
0% {
transform: scale(0);
opacity: 0;
}
8% {
transform: scale(.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
```
- 內層圓圈
```
.circle1 {
...
animation: scaleout 1s ease-in-out infinite alternate;
}
@keyframes scaleout {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
```
```
動畫1
正在等待司機接單...
動畫2
// css
body {
padding: 100px;
}
span {
display: inline-block;
}
.wrap {
position: relative;
float: left;
width: 200px;
height: 200px;
margin: 100px;
}
.circle {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(#fff, #54bfd0);
border-radius: 50%;
-webkit-animation: scale 2s ease infinite normal;
-moz-animation: scale 2s ease infinite normal;
-o-animation: scale 2s ease infinite normal;
animation: scale 2s ease infinite normal;
}
.circle1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
border-radius: 50%;
/*background: #076d7d;*/
background: radial-gradient(#fff, #076d7d);
-webkit-animation: scaleout 1s ease-in-out infinite alternate;
-moz-animation: scaleout 1s ease-in-out infinite alternate;
-o-animation: scaleout 1s ease-in-out infinite alternate;
animation: scaleout 1s ease-in-out infinite alternate;
}
.text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/*width: 150px;
height: 20px;*/
text-align: center;
line-height: 200px;
}
.animation2 {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
-webkit-animation: animation2 4s linear infinite normal;
-moz-animation: animation2 4s linear infinite normal;
-o-animation: animation2 4s linear infinite normal;
animation: animation2 4s linear infinite normal;
}
.animation20 {
}
@keyframes animation2 {
0% {
/*transform: scale(1);*/
/*opacity: 1;*/
}
100% {
transform: scale(4);
opacity: 0;
}
}
.animation21 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.animation22 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.animation23 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.fixedcirle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
/*background: radial-gradient(rgba(255, 0, 0, 0), #076d7d);*/
background: #076d7d;
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(0);
opacity: 0;
}?
8% {
-webkit-transform: scale(.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}
}
@-moz-keyframes scale {
0% {
-moz-transform: scale(0);
opacity: 0;
}?
8% {
-moz-transform: scale(.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
opacity: 0;
}
}
@-o-keyframes scale {
0% {
-o-transform: scale(0);
opacity: 0;
}?
8% {
-o-transform: scale(.5);
opacity: 1;
}
100% {
-o-transform: scale(2);
opacity: 0;
}
}
@keyframes scale {
0% {
transform: scale(0);
opacity: 0;
}?
8% {
transform: scale(.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes scaleout {
0% {
-webkit-transform: scale(1);
}?
100% {
-webkit-transform: scale(2);
/*opacity: 0.5;*/
}
}
@-moz-keyframes scaleout {
0% {
-moz-transform: scale(1);
}?
100% {
-moz-transform: scale(2);
/*opacity: 0.5;*/
}
}
@-o-keyframes scaleout {
0% {
-o-transform: scale(1);
}?
100% {
-o-transform: scale(2);
/*opacity: 0.5;*/
}
}
@keyframes scaleout {
0% {
transform: scale(1);
}?
100% {
transform: scale(2);
/*opacity: 0.5;*/
}
}
```
### 6.丟幀問題
> 回流與重繪的知識: 瀏覽器會解析三個東西：HTML、Javascript、CSS。
> 瀏覽器首先會根據HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，javascript可以通過DOM API與CSS API操作DOM Tree與CSS Rule Tree，從而引起頁面變化。
>?
> 瀏覽器解析結束會通過DOM Tree與CSS Rule Tree形成render tree，只有display不為none的元素才會形成render Tree，render Tree形成后瀏覽器會調用GUI繪制頁面，在此之前做的一件事情便是layout或者說reflow。上面的描述簡單而言可以分為以下流程：
>?
> l 生成DOM樹
>?
> l 計算CSS樣式
>?
> l 構建render tree
>?
> l reflow，定位元素位置大小
>?
> l 繪制頁面
>?
> 在這個過程中，**若是javascript動態改變DOM Tree便會引起reflow**
> 頁面中的元素改變，只要不影響尺寸，比如只是顏色改變只會引起repaint不會引起回流
>?
> 否則，reflow不可避免，這個時候便需要重新計算形成render Tree
> reflow耗用的系統資源較大，**DOM Tree** 中受到影響的節點皆會reflow，然后影響其子節點最壞的情況是所有節點reflow，該問題引發的現象便是低性能的電腦風扇不停的轉，手機變得很熱，并且非常耗電，以下操作可能引起reflow
>?
> l 操作dom結構
>?
> l 動畫
>?
> l DOM樣式修改
>?
> l 獲取元素尺寸的API
#### 重新認識Timeline
[詳細講解Timeline](http://www.cnblogs.com/yexiaochai/p/4314260.html)
#### 丟幀
> 瀏覽器一次的刷新約16ms
> 如果中間有一次的操作比如渲染的時間大于了16ms而導致瀏覽器沒有來得及繪制，那么那次的操作便失效了，這個就是所謂的丟幀。
### 7.移動端性能優化
[使用requestAnimationFrame()優化JavaScript動畫性能](http://www.webhek.com/post/using-requestanimationframe.html)
