標籤：
摘要：因為平時搞移動端的比例多一點，做個小小的總結。雖然網上很多這方面的總結，不過還是想自己也總結一下，適合自己的才是最好的。這樣也方便以後自己的查閱
viewport模板——通用
<!DOCTYPE html><html><head><meta charset="utf-8"><!-- H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面 --><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <!-- 當網站添加到主畫面快速啟動方式，可隱藏地址欄，僅針對ios的safari ios7.0版本以後，safari上已看不到效 --><meta content="yes" name="apple-mobile-web-app-capable"><!-- 將網站添加到主畫面快速啟動方式，僅針對ios的safari頂端狀態條的樣式 可選default、black、black-translucent--><meta content="black" name="apple-mobile-web-app-status-bar-style"><!-- 忽略將頁面中的數字識別為電話號碼 --><meta content="telephone=no" name="format-detection"><!-- 忽略Android平台中對郵箱地址的識別 --><meta content="email=no" name="format-detection"><title>標題</title><link rel="stylesheet" href="style.css"></head><body> 內容</body></html>
移動端字型font-family
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
css3多文本換行
p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
解決ios下輸入框為fixed的亂位
在ios裡面，當一個文字框的樣式為fixed時候，如果這個文字框獲得焦點，它的位置就會亂掉，由於ios裡面做了自適應置中，這個fixed的文字框會跑到頁面中間。類似：
（請原諒盜圖，我錯了）
解決辦法有如下兩個：
1、可以在文字框獲得焦點的時候將fixed改為absolute，失去焦點時在改回fixed，但是這樣會讓螢幕有上下滑動的體驗不太好。
.fixfixed {position:absolute;}$(document).on(‘focus‘, ‘input‘, function(e) { $(this).addClass(‘fixfixed‘);}).on(‘blur‘, ‘input‘, function(e) { $(this).removeClass(‘fixfixed‘);})
2、還有一種就是用一個假的fixed的文字框放在頁面頂部，一個absolute的文字框隱藏在頁面頂部，當fixed的文字框獲得焦點時候將其隱藏，然後顯示absolute的文字框，當失去焦點時，在把absolute的文字框隱藏，fixed的文字框顯示。
.fixfixed {position:absolute;}$(document) .on(‘focus‘, ‘input‘, function(e) { $absolute..show(); $(this).hide(); }) .on(‘blur‘, ‘input‘, function(e) { $fixed..show(); $(this).hide(); }); 快速回彈滾動
在有滾動的地方加上下面這段css，滑動起來就會特別的順暢。而不會出現那種一卡一卡的現象。主要還是針對ios機，個人覺得這個很實用
.div { overflow: auto; -webkit-overflow-scrolling: touch; }
ios和android局部滾動時隱藏原生捲軸
.ennobleList::-webkit-scrollbar { opacity: 0;}.ennobleList::-webkit-scrollbar:horizontal { opacity: 0;} 禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}
禁止ios和android使用者選中文字
.css{-webkit-user-select:none}
使用彈性盒子box布局
//css .box { display: box; display: -webkit-box; -webkit-box-align: center; // 設定裡面的元素垂直置中 -webkit-box-pack: center; // 設定水平置中 width: 200px; height: 30px; } .box .box_flex1{ box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; background: blue; } .box .box_flex2 { box-flex: 2; -webkit-box-flex: 2; -moz-box-flex:2; background: red; } .box .box_flex3 { box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; background: green; }//html <ul class="box"> <li class="box_flex1">1</li> <li class="box_flex2">2</li> <li class="box_flex3">3</li></ul>
調適型配置模式
為了適應不同解析度的手機，我們不建議把寬度寫死。而是採用自適應的布局。可以看看我的這篇博文
http://www.cnblogs.com/xianyulaodi/p/5533201.html
禁用 ios使用者點選連結時，會出現一個半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
background-image和image的載入區別
在網頁載入的過程中，以css背景圖存在的圖片background-image會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，
而html中的標籤img是網頁結構（內容）的一部分會在載入結構的過程中載入，換句話講，網頁會先載入標籤img的內容，再載入背景圖片background-image，
如果你用引入了一個很大的圖片，那麼在這個圖片下載完成之前，img後的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容載入完成之後，
才開始載入背景圖片，不會影響你瀏覽網頁內容。
虛擬元素改變number類型input框的預設樣式
input[type=number]::-webkit-textfield-decoration-container { background-color: transparent; }input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none;}input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;}
改變placeholder的顏色值
input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}
旋轉事件和樣式：
可以參考這篇文章 ：http://www.cnblogs.com/xianyulaodi/p/5533185.html
打電話和發簡訊：
打電話：//注意號碼，不要亂搞
<a href="tel:110">打電話給:110</a>
發簡訊：
<a href="sms:110">發簡訊給: 110</a>
transition閃屏
在 Chrome and Safari中，修複使用CSS transforms 或者 animations時可能會有頁面閃爍的效果
下面的代碼可以修複此情況：
.cube { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; /* Other transform properties here */}
在webkit核心的瀏覽器中，可用下面的方法
.cube { -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 */}
長時間按住頁面出現閃退
element { -webkit-touch-callout: none;}
IOS鍵盤字母輸入，預設首字母大寫
<input type="text" autocapitalize="off" />
移動端點透問題
這個問題比較經典，小小總結
情景再現:
<div id="mask">點擊測試</div><a href="#">www.baidu.com</a>
div是絕對位置的遮罩層，並且z-index比a要高，a是一個連結，跳轉到百度。我們給div綁定一個tap事件
$(‘#mask‘).on(‘tap‘,function(){ $(‘#mask‘).hide();});
按照我們預想，遮罩層div消失了。但是當我們在a標籤上點擊遮罩層時，a連結被觸發，跳轉了。也就是出現我們所說的點透事件。
出現原因：
事件的觸發順序：touchstart >touchmove>touchend >click
也就是說，touchstart 早於 touchend 早於click。click在移動端有300ms延遲，，當我們tap觸發之後遮罩層隱藏， 此時 click還沒有觸發，300ms之後由於遮罩層隱藏，我們的click觸發到了下面的a連結上，因而發生點透事件。
解決方案：
（1）盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
（2）使用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a標籤的click
（4）實在不行就換成click事件
使用touchend事件解決方案，如下：
$("#mask").on("touchend", function (e) { e.preventDefault(); });
雖然網上很多這方面的總結，不過這套總結是適合我自己的。方便以後自己查閱
未完待續，持續更新.....
如果您覺得文章有用，也可以給鹹魚老弟發個小額紅包鼓勵鼓勵，哈哈
web移動端常用知識點筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
