H5項(xiàng)目常見問題及注意事項(xiàng)

Meta基礎(chǔ)知識：

  • H5頁面窗口自動調(diào)整到設(shè)備寬度开呐，并禁止用戶縮放頁面
//一隧哮、HTML頁面結(jié)構(gòu)
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    設(shè)置viewport寬度啃洋，為一個(gè)正整數(shù)霸褒，或字符串‘device-width’
// height   設(shè)置viewport高度低斋，一般設(shè)置了寬度修噪，會自動解析出高度躲雅，可以不用設(shè)置
// initial-scale    默認(rèn)縮放比例喊巍，為一個(gè)數(shù)字屠缭，可以帶小數(shù)
// minimum-scale    允許用戶最小縮放比例，為一個(gè)數(shù)字崭参，可以帶小數(shù)
// maximum-scale    允許用戶最大縮放比例呵曹，為一個(gè)數(shù)字，可以帶小數(shù)
// user-scalable    是否允許手動縮放

//二、JS動態(tài)判斷
<script>
  var phoneWidth =  parseInt(window.screen.width);
  var phoneScale = phoneWidth/640;
  var ua = navigator.userAgent;
  if (/Android (\d+.\d+)/.test(ua)){
      var version = parseFloat(RegExp.$1);
      if(version>2.3){
          document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+',  maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
      }else{
          document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
      }
  } else {
      document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
  }
</script>


//空白頁基本meta標(biāo)簽 

<!-- 設(shè)置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄奄喂，僅針對IOS的Safari（注：IOS7.0版本以后铐殃，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態(tài)條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數(shù)字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" /> 

其他meta標(biāo)簽 
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器跨新，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點(diǎn)擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
  • 常見問題：
    移動端如何定義字體font-family
    --------------------------------------中文字體的英文名稱
    @ 宋體 SimSun
    @ 黑體 SimHei
    @ 微信雅黑 Microsoft Yahei
    @ 微軟正黑體 Microsoft JhengHei
    @ 新宋體 NSimSun
    @ 新細(xì)明體 MingLiU
    @ 細(xì)明體 MingLiU
    @ 標(biāo)楷體 DFKai-SB
    @ 仿宋 FangSong
    @ 楷體 KaiTi
    @ 仿宋_GB2312 FangSong_GB2312
    @ 楷體_GB2312 KaiTi_GB2312

@ 說明：中文字體多數(shù)使用宋體富腊、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }
  • 打電話發(fā)短信寫郵件怎么實(shí)現(xiàn)
// 一域帐、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>

//  二赘被、發(fā)短信，winphone系統(tǒng)無效
<a href="sms:10086">發(fā)短信給: 10086</a>

// 三肖揣、寫郵件
//注：在添加這些功能時(shí)民假，第一個(gè)功能以"?"開頭，后面的以"&"開頭

//1.普通郵件
<a href="mailto:863139978@qq.com">點(diǎn)擊我發(fā)郵件</a>

//2.收件地址后添加?cc=開頭龙优，可添加抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點(diǎn)擊我發(fā)郵件</a>

//3.跟著抄送地址后羊异，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點(diǎn)擊我發(fā)郵件</a>

//4.包含多個(gè)收件人、抄送彤断、密件抄送人野舶，用分號(;)隔開多個(gè)郵件人的地址
<a href="mailto:863139978@qq.com;384900096@qq.com">點(diǎn)擊我發(fā)郵件</a>

//5.包含主題，用?subject=
<a href="mailto:863139978@qq.com?subject=郵件主題">點(diǎn)擊我發(fā)郵件</a>

//6.包含內(nèi)容瓦糟，用?body=;如內(nèi)容包含文本筒愚，使用%0A給文本換行 
<a href="mailto:863139978@qq.com?body=郵件主題內(nèi)容%0A騰訊誠信%0A期待您的到來">點(diǎn)擊我發(fā)郵件</a>

//7.內(nèi)容包含鏈接，含http(s)://等的文本自動轉(zhuǎn)化為鏈接
<a href="mailto:863139978@qq.com?body=[http://www.baidu.com">點(diǎn)擊我發(fā)郵件</a&gt](http://www.baidu.com/);

//8.內(nèi)容包含圖片（PC不支持）
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">點(diǎn)擊我發(fā)郵件</a>

//9.完整示例 
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0A[http://www.baidu.com%0A%0A<img](http://www.baidu.com%0A%0A%3Cimg/) src='images/1.jpg' />">點(diǎn)擊我發(fā)郵件</a>
  • 移動端touch事件（區(qū)分webkit和winphone）
/ 當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件 /
// 以下支持webkit
touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生菩浙。不管當(dāng)前有多少只手指
touchmove——當(dāng)手指在屏幕上滑動時(shí)連續(xù)觸發(fā)巢掺。通常我們再滑屏頁面，會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動
touchend——當(dāng)手指離開屏幕時(shí)觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會觸發(fā)劲蜻。例如在觸摸過程中突然頁面alert()一個(gè)提示框陆淀，此時(shí)會觸發(fā)該事件，這個(gè)事件比較少用

//TouchEvent說明：
touches：屏幕上所有手指的信息
targetTouches：手指在目標(biāo)區(qū)域的手指信息
changedTouches：最近一次觸發(fā)該事件的手指信息
touchend時(shí)先嬉，touches與targetTouches信息會被刪除轧苫，changedTouches保存的最后一次的信息，最好用于計(jì)算手指信息


//參數(shù)信息(changedTouches[0])
clientX疫蔓、clientY在顯示區(qū)的坐標(biāo)
target：當(dāng)前元素


//事件響應(yīng)順序
ontouchstart  > ontouchmove  > ontouchend > onclick

// 以下支持winphone 8
MSPointerDown——當(dāng)手指觸碰屏幕時(shí)候發(fā)生含懊。不管當(dāng)前有多少只手指
MSPointerMove——當(dāng)手指在屏幕上滑動時(shí)連續(xù)觸發(fā)。通常我們再滑屏頁面衅胀，會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動
MSPointerUp——當(dāng)手指離開屏幕時(shí)觸發(fā)

移動端click屏幕產(chǎn)生200-300ms的延時(shí)響應(yīng)

說明：移動設(shè)備上的web網(wǎng)頁是有300ms延遲的岔乔，玩玩會造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。

以下是歷史原因滚躯，來源一個(gè)公司內(nèi)一個(gè)同事的分享：
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機(jī)端上雏门，使用了雙擊縮放(double tap to zoom)的方案嘿歌，比如你在手機(jī)上用瀏覽器打開一個(gè)PC上的網(wǎng)頁，你可能在看到頁面內(nèi)容雖然可以撐滿整個(gè)屏幕茁影，但是字體宙帝、圖片都很小看不清，此時(shí)可以快速雙擊屏幕上的某一部分募闲，你就能看清該部分放大后的內(nèi)容步脓，再次雙擊后能回到原始狀態(tài)。

雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次蝇更，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例沪编。

原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候年扩，例如跳轉(zhuǎn)鏈接<a href="#"></a>蚁廓，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作厨幻，所以相嵌，捕獲第一次單擊后，瀏覽器會先Hold一段時(shí)間t况脆，如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊饭宾，則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理，如果t時(shí)間里用戶進(jìn)行了第二次單擊操作格了，則瀏覽器會禁止跳轉(zhuǎn)看铆，轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作。那么這個(gè)時(shí)間區(qū)間t有多少呢盛末？在IOS safari下弹惦，大概為300毫秒。這就是延遲的由來悄但。造成的后果用戶純粹單擊頁面棠隐，頁面需要過一段時(shí)間才響應(yīng)，給用戶慢體驗(yàn)感覺檐嚣，對于web開發(fā)者來說是助泽，頁面js捕獲click事件的回調(diào)函數(shù)處理，需要300ms后才生效嚎京，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理嗡贺。

//解決方案：
fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲
zepto的touch模塊，tap事件也是為了解決在click的延遲問題

Rentina顯示屏原理及設(shè)計(jì)方案

說明：retina屏是一種具備超高像素密度的液晶屏鞍帝，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)暑刃，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中膜眠，像素點(diǎn)1個(gè)變?yōu)?個(gè)。
在高清顯示屏中的位圖被放大，圖片會變得模糊宵膨，因此移動端的視覺稿通常會設(shè)計(jì)為傳統(tǒng)PC的2倍架谎。
那么，前端的應(yīng)對方案是：設(shè)計(jì)稿切出來的圖片長寬保證為偶數(shù)辟躏，并使用backgroud-size把圖片縮小為原來的1/2

//例如圖片寬高為：200px*200px谷扣，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值為原來的1/2，例如視覺稿40px的字體捎琐，使用樣式的寫法為20px
.css{font-size:20px}


//image-set設(shè)計(jì)Rentina背景圖
image-set,webkit私有屬性会涎，也是CSS4的屬性，為解決Rentina屏幕下的圖像而生瑞凑。
.css {
    background: url(images/bg.jpg) no-repeat center;
    background: -webkit-image-set(
    url(images/bg.jpg) 1x,     //支持image-set普通屏
    url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
}

點(diǎn)擊元素產(chǎn)生背景或邊框怎么去掉

/ios用戶點(diǎn)擊一個(gè)鏈接末秃，會出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩籽御；
//android用戶點(diǎn)擊一個(gè)鏈接练慕，會出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果技掏；
//winphone系統(tǒng),點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景铃将，能通過設(shè)置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機(jī)型去除不了哑梳，如小米2劲阎。對于按鈕類還有個(gè)辦法，不使用a或者input標(biāo)簽鸠真，直接用div標(biāo)簽
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個(gè)副作用悯仙，就是輸入法不再能夠輸入多個(gè)字符
}

// 也可以


{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no"

美化表單元素

//一、使用appearance改變webkit瀏覽器的默認(rèn)外觀
input,select { -webkit-appearance:none; appearance: none; } 


//二弧哎、winphone下雁比，使用偽元素改變表單元素默認(rèn)外觀
//1.禁用select默認(rèn)箭頭，::-ms-expand修改表單控件下拉箭頭撤嫩，設(shè)置隱藏并使用背景圖片來修飾
select::-ms-expand { display:none; }


//2.禁用radio和checkbox默認(rèn)樣式偎捎，::-ms-check修改表單復(fù)選框或單選框默認(rèn)圖標(biāo)，設(shè)置隱藏并使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }


//3.禁用pc端表單輸入框默認(rèn)清除按鈕序攘，::-ms-clear修改清除按鈕茴她，設(shè)置隱藏并使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }

移動端字體單位font-size選擇px還是rem

// 如需適配多種移動設(shè)備，建議使用rem程奠。以下為參考值：
html { font-size: 62.5%; }   //10*16 = 62.5%
//設(shè)置12px字體   這里注意在rem前要加上對應(yīng)的px值丈牢，解決不支持rem的瀏覽器的兼容問題，做到優(yōu)雅降級
body { font-size:12px; font-size:1.2rem; }

超實(shí)用的CSS樣式

//去掉webkit的滾動條——display: none;
//其他參數(shù)
::-webkit-scrollba //滾動條整體部分
::-webkit-scrollbar-thumb   //滾動條內(nèi)的小方塊
::-webkit-scrollbar-track   //滾動條軌道
::-webkit-scrollbar-button  //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece  //滾動條中間部分瞄沙，內(nèi)置軌道
::-webkit-scrollbar-corner       //邊角己沛，兩個(gè)滾動條交匯處
::-webkit-resizer            //兩個(gè)滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件

// 禁止長按鏈接與圖片彈出菜單
a,img { -webkit-touch-callout: none }


// 禁止ios和android用戶選中文字
html,body {-webkit-user-select:none; user-select: none; }


// 改變輸入框placeholder的顏色值
::-webkit-input-placeholder { / WebKit browsers /
color: #999; }
:-moz-placeholder { / Mozilla Firefox 4 to 18 /
color: #999; }
::-moz-placeholder { / Mozilla Firefox 19+ /
color: #999; }
:-ms-input-placeholder { / Internet Explorer 10+ /
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }


// android上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}


// 阻止windows Phone的默認(rèn)觸摸事件
/說明：winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無效的慌核，可通過樣式來禁用，如：/
html { -ms-touch-action:none; } //禁止winphone默認(rèn)觸摸事件
  • 取消input在ios下申尼，輸入的時(shí)候英文首字母的默認(rèn)大寫
<input autocapitalize="off" autocorrect="off" />
  • 手機(jī)拍照和上傳圖片
//IOS有拍照垮卓、錄像、選取本地圖片功能师幕，部分Android只有選擇本地圖片功能粟按。Winphone不支持
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />
  • 屏幕旋轉(zhuǎn)的事件和樣式
//JS處理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //這里是橫屏下需要執(zhí)行的事件
    }else{
        //這里是豎屏下需要執(zhí)行的事件
    }
}

orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)


//CSS處理
//豎屏?xí)r樣式
@media all and (orientation:portrait){   }
//橫屏?xí)r樣式
@media all and (orientation:landscape){   }

audio元素和video元素在ios和andriod中無法自動播放

//音頻，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>

//音頻霹粥，寫法二
<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    優(yōu)先播放音樂bg.ogg灭将，不支持在播放bg.mp3
</audio>


//JS綁定自動播放（操作window時(shí)，播放音樂）
$(window).one('touchstart', function(){
    music.play();
})


//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);


//小結(jié)
//1.audio元素的autoplay屬性在IOS及Android上無法使用后控，在PC端正常
//2.audio元素沒有設(shè)置controls時(shí)庙曙，在IOS及Android會占據(jù)空間大小，而在PC端Chrome是不會占據(jù)任何空間

重力感應(yīng)事件

// 運(yùn)用HTML5的deviceMotion忆蚀，調(diào)用重力感應(yīng)事件
if(window.DeviceMotionEvent){
    document.addEventListener('devicemotion', deviceMotionHandler, false)
}

var speed = 30;
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 ){
        //這里是搖動后要執(zhí)行的方法 
        yaoAfter();
    }
    lastX = x;
    lastY = y;
    lastZ = z;
}


function yaoAfter(){
    //do something
}


//說明：說見案例搖一搖效果中yao.js

微信瀏覽器用戶調(diào)整字體大小后頁面矬了矾利，怎么阻止用戶調(diào)整

//以下代碼可使Android機(jī)頁面不再受用戶字體縮放強(qiáng)制改變大小，但是會有1S左右延時(shí)馋袜，期間可以考慮loading來處理
if (typeof(WeixinJSBridge) == "undefined") {
    document.addEventListener("WeixinJSBridgeReady", function (e) {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
                alert(JSON.stringify(res));
            })
        }, 0)
    });
}else{

    setTimeout(function(){
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
            alert(JSON.stringify(res));
        })
    }, 0)

}

//IOS下可使用 -webkit-text-size-adjust禁止用戶調(diào)整字體大小
body { -webkit-text-size-adjust:100%!important; }


//最好的解決方案：最好使用rem或百分比布局

定位的坑

//fixed定位
//1.ios下fixed元素容易定位出錯(cuò)男旗，軟鍵盤彈出時(shí)，影響fixed元素定位
//2.android下fixed表現(xiàn)要比iOS更好欣鳖，軟鍵盤彈出時(shí)察皇，不會影響fixed元素定位
//3.ios4下不支持position:fixed
//解決方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
<div id="wrapper">
        <ul>
               <li></li>
               .....
        </ul>
</div>
<script src="iscroll.js"></script>
<script>
    var myscroll;
    function loaded(){
        myscroll=new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
</script>

//position定位
//Android下彈出軟鍵盤彈出時(shí)泽台，影響absolute元素定位
//解決方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
    $('.ipt').on('focus', function(){
        $('.css').css({'visibility':'hidden'})
    }).on('blur', function(){
        $('.css').css({'visibility':'visible'})
    })
}

播放視頻不全屏

<!--
1.ios7+支持自動播放
2.支持Airplay的設(shè)備（如：音箱什荣、Apple TV)播放
x-webkit-airplay="true" 
3.播放視頻不全屏
webkit-playsinline="true" 
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

JS判斷設(shè)備

function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i<len,len = agent.length; i++){
        if(ua.indexOf(agent[i])>0){         
            break;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})

JS判斷微信瀏覽器

function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}

android 2.3 bug

//1.@-webkit-keyframes 需要以0%開始100%結(jié)束，0%的百分號不能去掉
//2.after和before偽類無法使用動畫animation
//3.border-radius不支持%單位怀酷，如要兼容稻爬，可以給radius設(shè)置一下較大的值
//4.translate百分比的寫法和scale在一起會導(dǎo)致失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

//1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
//2.同時(shí)設(shè)置border-radius和背景色的時(shí)候蜕依，背景色會溢出到圓角以外部分
//3.部分手機(jī)(如三星)桅锄，a鏈接支持鼠標(biāo):visited事件，也就是說鏈接訪問后文字變?yōu)樽仙?//4.android無法同時(shí)播放多音頻audio

消除transition閃屏

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

開啟硬件加速

//目前样眠，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速友瘤，當(dāng)檢測到某個(gè)DOM元素應(yīng)用了某些CSS規(guī)則時(shí)就會自動開啟，從而解決頁面閃白檐束，保證動畫流暢辫秧。
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

渲染優(yōu)化

//1.禁止使用iframe（阻塞父文檔onload事件）
//2.禁止使用gif圖片實(shí)現(xiàn)loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代碼代替JS動畫被丧；
//開啟GPU加速盟戏；
//使用base64位編碼圖片(不小圖而言绪妹，大圖不建議使用)
    // 對于一些小圖標(biāo)，可以使用base64位編碼抓半，以減少網(wǎng)絡(luò)請求喂急。但不建議大圖使用，比較耗費(fèi)CPU笛求。小圖標(biāo)優(yōu)勢在于：
    //1.減少HTTP請求；
    //2.避免文件跨域糕簿；
    //3.修改及時(shí)生效探入；

本文由用戶 jopen 自行上傳分享，僅供網(wǎng)友學(xué)習(xí)交流懂诗。所有權(quán)歸原作者蜂嗽，若您的權(quán)利被侵害，請聯(lián)系管理員殃恒。
轉(zhuǎn)載本站原創(chuàng)文章植旧，請注明出處，并保留原始鏈接离唐、圖片水印病附。
本站是一個(gè)以用戶分享為主的開源技術(shù)平臺，歡迎各類分享亥鬓！
本文地址：https://www.open-open.com/lib/view/open1449325854077.html

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末完沪，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子嵌戈，更是在濱河造成了極大的恐慌覆积，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,039評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件熟呛，死亡現(xiàn)場離奇詭異宽档，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)庵朝，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門吗冤，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人偿短，你說我怎么就攤上這事欣孤。” “怎么了昔逗？”我有些...
    開封第一講書人閱讀 165,417評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵降传，是天一觀的道長。 經(jīng)常有香客問我勾怒，道長婆排，這世上最難降的妖魔是什么声旺？ 我笑而不...
    開封第一講書人閱讀 58,868評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮段只，結(jié)果婚禮上腮猖，老公的妹妹穿的比我還像新娘。我一直安慰自己赞枕，他們只是感情好澈缺，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著炕婶，像睡著了一般姐赡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上柠掂，一...
    開封第一講書人閱讀 51,692評論 1贊 305
  • 城市分裂傳說
    那天项滑，我揣著相機(jī)與錄音，去河邊找鬼涯贞。 笑死枪狂，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的宋渔。 我是一名探鬼主播州疾，決...
    沈念sama閱讀 40,416評論 3贊 419
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼傻谁！你這毒婦竟也來了孝治？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,326評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤审磁，失蹤者是張志新（化名）和其女友劉穎谈飒，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體态蒂，經(jīng)...
    沈念sama閱讀 45,782評論 1贊 316
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡杭措，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了钾恢。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片手素。...
    茶點(diǎn)故事閱讀 40,102評論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖瘩蚪，靈堂內(nèi)的尸體忽然破棺而出泉懦，到底是詐尸還是另有隱情，我是刑警寧澤疹瘦，帶...
    沈念sama閱讀 35,790評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布崩哩，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏邓嘹。R本人自食惡果不足惜酣栈，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望汹押。 院中可真熱鬧矿筝，春花似錦、人聲如沸棚贾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽鸟悴。三九已至陈辱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間细诸，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工陋守， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留震贵，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,332評論 3贊 373
  • 代替公主和親
    正文 我出身青樓水评，卻偏偏與公主長得像猩系，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子中燥，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評論 2贊 355