移動端適配
1.適配寬高等問題
REM方案：改變頁面根部的font-size
1.通過媒體查詢css來改變，缺點，不夠精確，只能單純解決長度問題，不夠適配
```
html{font-size: 32px}
@media(min-device-width: 375px) {
html{font-size: 64px}
}
@media(min-device-width: 414px) {
html(font-size: 75px)
}
```
js方案：通過縮放viewport，達到高清效果，設置data-dpa屬性，方便csshack
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
scale = 1 / dpr;
dpr = win.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
// 設置viewport，進行縮放，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',
initial-scale=' + scale + ',maximum-scale=' + scale + ',
minimum-scale=' + scale + ',user-scalable=no');
// 設置data-dpr屬性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem: function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
2.解決字體適配問題：通過上面的dpr屬性來進行cssHack
字體要求：任何手機屏幕上字體大小都要統一，所以我們針對不同的分辨率(dpr不同)，會做如下處理：
font-size: 16px;
[data-dpr="2"] input {
font-size: 32px;
}
為了方便，我們也會用less寫一個mixin：
less
font-dpr(@font-size){
font-size: @font-size;
[data-dpr="2"] & {
font-size: @font-size * 2;
}
[data-dpr="2.5"] & {
font-size: @font-size * 2.5;
}
[data-dpr="2.75"] & {
font-size: @font-size * 2.75;
}
[data-dpr="3"] & {
font-size: @font-size * 3;
}
[data-dpr="4"] & {
font-size: @font-size * 4;
}
}
.font-dpr(font-size, 32);
當然也有開源的插件來幫我們做這件事
lib-flexible 可伸縮布局方案:
它的原理跟以上的原理一樣，也是動態創建viewport
字體問題:用[data-dpr]屬性來區分不同dpr下的文本字號大小
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默認寫上dpr為1的
sass
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
@include font-dpr(16px);
Css兼容性問題
* 快速點擊問題：因為瀏覽器需要300毫秒來判斷是否是快速點擊，所以頁面js捕獲click事件的回調函數處理，需要300ms后才生效：
使用fastclick.js， 如果使用zepto，使用touch和tap事件
* 一些情況下對非可點擊元素如(label,span)監聽click事件ios下不會觸發：
css增加cursor:pointer就搞定了。
* 當輸入框在最底部，點擊軟鍵盤后輸入框會被遮擋。可采用如下方式解決
var oHeight = $(document).height(); //瀏覽器當前的高度
$(window).resize(function(){
if($(document).height() < oHeight){
$("#footer").css("position","static");
}else{
$("#footer").css("position","absolute");
}
});
* 消除 transition 閃屏：
-webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-backface-visibility: hidden; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/
*在ios和andriod中,audio元素和video元素在無法自動播放
$('html').on('touchstart',function(){
audio.play()
})
*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);
*fixed定位缺陷：
? ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
? android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
? ios4下不支持position:fixed
? 解決方案：1. 可用iScroll插件解決這個問題
*阻止旋轉屏幕時自動調整字體大小：
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
*calc的兼容性處理
CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。Android瀏覽器目前仍然不支持calc，所以要在之前增加一個保守尺寸：
div {
width: 95%;
width: -webkit-calc(100% - 50px);
width: calc(100% - 50px);
}
