Meta標(biāo)簽：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個(gè)想必大家都知道，當(dāng)頁面在手機(jī)上顯示時(shí)，增加這個(gè)meta可以讓頁面強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點(diǎn)擊屏幕放大瀏覽。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
這兩個(gè)屬性分別對(duì)ios上自動(dòng)識(shí)別電話和android上自動(dòng)識(shí)別郵箱做了限制。
獲取滾動(dòng)條的值：
window.scrollY window.scrollX
桌面瀏覽器中想要獲取滾動(dòng)條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會(huì)發(fā)現(xiàn)這兩個(gè)屬性是未定義的，為什么呢？因?yàn)樵趇OS中沒有滾動(dòng)條的概念，在Android中通過這兩個(gè)屬性可以正常獲取到滾動(dòng)條的值，那么在iOS中我們?cè)撊绾潍@取滾動(dòng)條的值呢？就是上面兩個(gè)屬性，但是事實(shí)證明android也支持這屬性，所以索性都用woindow.scroll.
禁止選擇文本：
-webkit-user-select:none
禁止用戶選擇文本，ios和android都支持
屏蔽陰影：
-webkit-appearance:none
親測(cè)，可以同時(shí)屏蔽輸入框怪異的內(nèi)陰影，解決iOS下無法修改按鈕樣式，測(cè)試還發(fā)現(xiàn)一個(gè)小問題就是，加了上面的屬性后，iOS下默認(rèn)還是帶有圓角的，不過可以使用 border-radius屬性修改。
css之border-box：
那我想要一個(gè)元素100%顯示，又必須有一個(gè)固定的padding-left／padding-right，還有1px的邊框，怎么辦？這樣編寫代碼必然導(dǎo)致出現(xiàn)橫向滾動(dòng)條，腫么辦？要相信問題就是用來解決的。這時(shí)候偉大的css3為我們提供了box-sizing屬性，對(duì)于這個(gè)屬性的具體解釋不做贅述（想深入了解的同學(xué)可以到w3school查看，要知道自己動(dòng)手會(huì)更容易記憶）。讓我們看看如何解決上面的問題：
element{
width: 100%;
padding-left: 10px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 1px solid blue;
}
css3多文本換行：
p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Webkit支持一個(gè)名為-webkit-line-clamp的屬性，參見鏈接，也就是說這個(gè)屬性并不是標(biāo)準(zhǔn)的一部分，可能是Webkit內(nèi)部使用的，或者被棄用的屬性。需要注意的是display需要設(shè)置成box，-webkit-line-clamp表示需要顯示幾行。
Retina屏幕高清圖片：
selector {
background-image: url(no-image-set.png);
background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}
image-set的語法，類似于不同的文本，圖像也會(huì)顯示成不同的：
- 不支持image-set：在不支持image-set的瀏覽器下，他會(huì)支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
- 支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時(shí)瀏覽器會(huì)選擇image-set中的@1x背景圖像；
- Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時(shí)瀏覽器會(huì)選擇image-set中的@2x背景圖像。
html5重力感應(yīng)事件：
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
//簡(jiǎn)單的搖一搖觸發(fā)代碼
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}
關(guān)于deviceMotionEvent是HTML5新增的事件，用來檢測(cè)手機(jī)重力感應(yīng)效果具體可參考http://w3c.github.io/deviceorientation/spec-source-orientation.html
移動(dòng)端touch事件：
- touchstart //當(dāng)手指接觸屏幕時(shí)觸發(fā)
- touchmove //當(dāng)已經(jīng)接觸屏幕的手指開始移動(dòng)后觸發(fā)
- touchend //當(dāng)手指離開屏幕時(shí)觸發(fā)
- touchcancel//當(dāng)某種touch事件非正常結(jié)束時(shí)觸發(fā)
這4個(gè)事件的觸發(fā)順序?yàn)椋?br>
touchstart -> touchmove -> touchend ->touchcancel
對(duì)于某些android系統(tǒng)touch的bug:
比如手指在屏幕由上向下拖動(dòng)頁面時(shí)，理論上是會(huì)觸發(fā) 一個(gè) touchstart ，很多次 touchmove ，和最終的 touchend ，可是在android 4.0上，touchmove只被觸發(fā)一次，觸發(fā)時(shí)間和touchstart 差不多，而touchend直接沒有被觸發(fā)。這是一個(gè)非常嚴(yán)重的bug，在google Issue已有不少人提出 ,這個(gè)很蛋疼的bug是在模擬下拉刷新是遇到的尤其當(dāng)touchmove的dom節(jié)點(diǎn)數(shù)量變多時(shí)比出現(xiàn)，當(dāng)時(shí)解決辦法就是用settimeout來稀釋touchmove。
單擊延遲：
click 事件因?yàn)橐却p擊確認(rèn)，會(huì)有 300ms 的延遲，體驗(yàn)并不是很好。
開發(fā)者大多數(shù)會(huì)使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。
Creating Fast Buttons for Mobile Web Applications
Eliminate 300ms delay on click events in mobile Safari
IOS里面fixed的文本框焦點(diǎn)居中
<!DOCTYPE html>
<head>
input {
position:fixed;
top:0;left:0;
}
</head>
<body>
<div class="header">
<form action="">
<label>Testfield: <input type="text" /></label>
</form>
</div>
</body>
</html>
在ios里面，當(dāng)一個(gè)文本框的樣式為fixed時(shí)候，如果這個(gè)文本框獲得焦點(diǎn)，它的位置就會(huì)亂掉，由于ios里面做了自適應(yīng)居中，這個(gè)fixed的文本框會(huì)跑到頁面中間。類似：
解決辦法有兩個(gè)：
可以在文本框獲得焦點(diǎn)的時(shí)候?qū)ixed改為absolute，失去焦點(diǎn)時(shí)在改回fixed，但是這樣會(huì)讓屏幕有上下滑動(dòng)的體驗(yàn)不太好。
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$this.addClass('fixfixed');
})
.on('blur', 'input', function(e) {
$this.removeClass('fixfixed');
});
還有一種就是用一個(gè)假的fixed的文本框放在頁面頂部，一個(gè)absolute的文本框隱藏在頁面頂部，當(dāng)fixed的文本框獲得焦點(diǎn)時(shí)候?qū)⑵潆[藏，然后顯示absolute的文本框，當(dāng)失去焦點(diǎn)時(shí)，在把a(bǔ)bsolute的文本框隱藏，fixed的文本框顯示。
.fixfixed {
position:absolute;
}
$(document)
.on('focus', 'input', function(e) {
$absolute..show();
$this.hide();
})
.on('blur', 'input', function(e) {
$fixed..show();
$this.hide();
});
最后一種就是頂部的input不參與滾動(dòng)，只讓其下面滾動(dòng)。
position:sticky
position:sticky是一個(gè)新的css3屬性，它的表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置。
.sticky {
position: -webkit-sticky;
position:sticky;
top: 15px;
}
瀏覽器兼容性：
由于這是一個(gè)全新的屬性，以至于到現(xiàn)在都沒有一個(gè)規(guī)范，W3C也剛剛開始討論它，而現(xiàn)在只有webkit nightly版本和chrome 開發(fā)版(Chrome 23.0.1247.0+ Canary)才開始支持它。
另外需要注意的是，如果同時(shí)定義了left和right值，那么left生效，right會(huì)無效，同樣，同時(shí)定義了top和bottom，top贏～～
移動(dòng)端點(diǎn)透事件
簡(jiǎn)單的說，由于在移動(dòng)端我們經(jīng)常會(huì)使用tap(touchstart)事件來替換掉click事件，那么就會(huì)有一種場(chǎng)景是：
<div id="mengceng"></div>
<a href="www.qq.com">www.qq.com</a>
div是絕對(duì)定位的蒙層z-index高于a，而a標(biāo)簽是頁面中的一個(gè)鏈接，我們給div綁定tap事件：
$('#mengceng').on('tap',function(){
$('#mengceng').hide();
});
我們點(diǎn)擊蒙層時(shí) div正常消失，但是當(dāng)我們?cè)赼標(biāo)簽上點(diǎn)擊蒙層時(shí)，發(fā)現(xiàn)a鏈接被觸發(fā)，這就是所謂的點(diǎn)透事件。
原因：
touchstart 早于 touchend 早于 click。亦即click的觸發(fā)是有延遲的，這個(gè)時(shí)間大概在300ms左右，也就是說我們tap觸發(fā)之后蒙層隱藏，此時(shí)click還沒有觸發(fā)，300ms之后由于蒙層隱藏，我們的click觸發(fā)到了下面的a鏈接上。
解決辦法：
- 盡量都使用touch事件來替換click事件。
- 阻止a鏈接的click的preventDefault
base64編碼圖片替換url圖片
在移動(dòng)端，網(wǎng)絡(luò)請(qǐng)求是很珍貴的資源，尤其在2g或者3g網(wǎng)絡(luò)下，所以能不發(fā)請(qǐng)求的資源都盡量不要發(fā)，對(duì)于一些小圖片icon之類的，可以將圖片用base64編碼，來減少網(wǎng)絡(luò)請(qǐng)求。
手機(jī)拍照和上傳圖片
<input type="file">的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">
動(dòng)畫效果時(shí)開啟硬件加速
我們?cè)谥谱鲃?dòng)畫效果時(shí)經(jīng)常會(huì)想要改版元素的top或者left來讓元素動(dòng)起來，在pc端還好但是移動(dòng)端就會(huì)有較大的卡頓感，這么我們需要使用css3的 transform: translate3d;來替換，
此效果可以讓瀏覽器開啟gpu加速，渲染更流暢，但是筆著實(shí)驗(yàn)時(shí)在ios上體驗(yàn)良好，但在一些低端android機(jī)型可能會(huì)出現(xiàn)意想不到的效果。
快速回彈滾動(dòng)
在iOS上如果你想讓一個(gè)元素?fù)碛邢?Native 的滾動(dòng)效果，你可以這樣做：
.div {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
經(jīng)筆著測(cè)試，此效果在不同的ios系統(tǒng)表現(xiàn)不一致，
對(duì)于局部滾動(dòng)，ios8以上，不加此效果，滾動(dòng)的超級(jí)慢，ios8一下，不加此效果，滾動(dòng)還算比較流暢
對(duì)于body滾動(dòng)，ios8以上，不加此效果同樣擁有彈性滾動(dòng)效果。
持續(xù)更新中。。
ios和android局部滾動(dòng)時(shí)隱藏原生滾動(dòng)條
android
::-webkit-scrollbar{
opacity: 0;
}
ios
使用一個(gè)稍微高一些div包裹住這個(gè)有滾動(dòng)條的div然后設(shè)置overflow:hidden擋住之
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
<div class="wrap">
<div class="box"></div>
</div>
設(shè)置placeholder時(shí)候 focus時(shí)候文字沒有隱藏
input:focus::-webkit-input-placeholder{
opacity: 0;
}
background-image和image的加載區(qū)別
在網(wǎng)頁加載的過程中，以css背景圖存在的圖片background-image會(huì)等到結(jié)構(gòu)加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載，而html中的標(biāo)簽img是網(wǎng)頁結(jié)構(gòu)（內(nèi)容）的一部分會(huì)在加載結(jié)構(gòu)的過程中加載，換句話講，網(wǎng)頁會(huì)先加載標(biāo)簽img的內(nèi)容，再加載背景圖片background-image，如果你用引入了一個(gè)很大的圖片，那么在這個(gè)圖片下載完成之前，img后的內(nèi)容都不會(huì)顯示。而如果用css來引入同樣的圖片，網(wǎng)頁結(jié)構(gòu)和內(nèi)容加載完成之后，才開始加載背景圖片，不會(huì)影響你瀏覽網(wǎng)頁內(nèi)容。
原創(chuàng)文章轉(zhuǎn)載請(qǐng)注明：
轉(zhuǎn)載自AlloyTeam：http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/
