H5項目常見問題及注意事項
Meta基礎(chǔ)知識：
H5頁面窗口自動調(diào)整到設(shè)備寬度疮装，并禁止用戶縮放頁面
//一、HTML頁面結(jié)構(gòu)// width? ? 設(shè)置viewport寬度赁炎，為一個正整數(shù)擎场，或字符串‘device-width’// height? 設(shè)置viewport高度瞒御，一般設(shè)置了寬度父叙，會自動解析出高度，可以不用設(shè)置// initial-scale? ? 默認(rèn)縮放比例肴裙，為一個數(shù)字趾唱，可以帶小數(shù)// minimum-scale? ? 允許用戶最小縮放比例，為一個數(shù)字蜻懦，可以帶小數(shù)// maximum-scale? ? 允許用戶最大縮放比例甜癞，為一個數(shù)字，可以帶小數(shù)// user-scalable? ? 是否允許手動縮放
//二宛乃、JS動態(tài)判斷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('');? ? }else{? ? ? ? document.write('');? ? }} else {? ? document.write('');}
空白頁基本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強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<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 點擊無高光 -->
<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ā)短信寫郵件怎么實現(xiàn)
// 一渡贾、打電話打電話給:0755-10086
//? 二、發(fā)短信雄右，winphone系統(tǒng)無效
<a href="sms:10086">發(fā)短信給: 10086</a>
// 三、寫郵件//注：在添加這些功能時纺讲，第一個功能以"?"開頭擂仍，后面的以"&"開頭//1.普通郵件點擊我發(fā)郵件//2.收件地址后添加?cc=開頭，可添加抄送地址（Android存在兼容問題）點擊我發(fā)郵件//3.跟著抄送地址后熬甚，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）點擊我發(fā)郵件//4.包含多個收件人逢渔、抄送、密件抄送人乡括，用分號(;)隔開多個郵件人的地址點擊我發(fā)郵件//5.包含主題肃廓，用?subject=點擊我發(fā)郵件//6.包含內(nèi)容智厌，用?body=;如內(nèi)容包含文本，使用%0A給文本換行 點擊我發(fā)郵件//7.內(nèi)容包含鏈接盲赊，含http(s)://等的文本自動轉(zhuǎn)化為鏈接http://www.baidu.com">點擊我發(fā)郵件</a>//8.內(nèi)容包含圖片（PC不支持）點擊我發(fā)郵件//9.完整示例http://www.baidu.com%0A%0A<imgsrc='images/1.jpg' />">點擊我發(fā)郵件
移動端touch事件（區(qū)分webkit和winphone）
/ 當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件 /// 以下支持webkittouchstart——當(dāng)手指觸碰屏幕時候發(fā)生铣鹏。不管當(dāng)前有多少只手指touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面哀蘑，會調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動touchend——當(dāng)手指離開屏幕時觸發(fā)touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)诚卸。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件绘迁，這個事件比較少用
//TouchEvent說明：
touches：屏幕上所有手指的信息
targetTouches：手指在目標(biāo)區(qū)域的手指信息
changedTouches：最近一次觸發(fā)該事件的手指信息
touchend時合溺，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息缀台，最好用于計算手指信息
//參數(shù)信息(changedTouches[0])
clientX棠赛、clientY在顯示區(qū)的坐標(biāo)
target：當(dāng)前元素
//事件響應(yīng)順序
ontouchstart? > ontouchmove? > ontouchend > onclick
// 以下支持winphone 8MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)膛腐。通常我們再滑屏頁面恭朗，會調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)
移動端click屏幕產(chǎn)生200-300ms的延時響應(yīng)
說明：移動設(shè)備上的web網(wǎng)頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效依疼。
以下是歷史原因痰腮，來源一個公司內(nèi)一個同事的分享：
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案律罢，比如你在手機上用瀏覽器打開一個PC上的網(wǎng)頁膀值，你可能在看到頁面內(nèi)容雖然可以撐滿整個屏幕，但是字體误辑、圖片都很小看不清沧踏，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容巾钉，再次雙擊后能回到原始狀態(tài)翘狱。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例砰苍。
原因就出在瀏覽器需要如何判斷快速點擊上潦匈，當(dāng)用戶在屏幕上單擊某一個元素時候，例如跳轉(zhuǎn)鏈接<a href="#"></a>赚导，此處瀏覽器會先捕獲該次單擊茬缩，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以吼旧，捕獲第一次單擊后凰锡，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進(jìn)行下一次點擊，則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理掂为，如果t時間里用戶進(jìn)行了第二次單擊操作裕膀，則瀏覽器會禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作勇哗。那么這個時間區(qū)間t有多少呢昼扛？在IOS safari下，大概為300毫秒智绸。這就是延遲的由來野揪。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應(yīng)瞧栗，給用戶慢體驗感覺斯稳，對于web開發(fā)者來說是，頁面js捕獲click事件的回調(diào)函數(shù)處理迹恐，需要300ms后才生效挣惰，也就間接導(dǎo)致影響其他業(yè)務(wù)邏輯的處理。
//解決方案：fastclick可以解決在手機上點擊事件的300ms延遲zepto的touch模塊殴边，tap事件也是為了解決在click的延遲問題
Rentina顯示屏原理及設(shè)計方案
說明：retina屏是一種具備超高像素密度的液晶屏憎茂，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上锤岸，蘋果設(shè)備的retina顯示屏中竖幔，像素點1個變?yōu)?個。在高清顯示屏中的位圖被放大是偷，圖片會變得模糊拳氢，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍。那么蛋铆，前端的應(yīng)對方案是：設(shè)計稿切出來的圖片長寬保證為偶數(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è)計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}
點擊元素產(chǎn)生背景或邊框怎么去掉
/ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用捧韵，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩市咆；//android用戶點擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣再来，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；//winphone系統(tǒng),點擊標(biāo)簽產(chǎn)生的灰色半透明背景，能通過設(shè)置去掉芒篷；//特殊說明：有些機型去除不了搜变，如小米2。對于按鈕類還有個辦法针炉，不使用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有個副作用，就是輸入法不再能夠輸入多個字符}
// 也可以
{ -webkit-tap-highlight-color: rgba(0,0,0,0); }//winphone下
美化表單元素
//一篡帕、使用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; }? ?
超實用的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? ? ? //邊角，兩個滾動條交匯處::-webkit-resizer? ? ? ? ? ? //兩個滾動條的交匯處上用于通過拖動調(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下，輸入的時候英文首字母的默認(rèn)大寫
手機拍照和上傳圖片
//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 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時球榆，播放音樂）
$(window).one('touchstart', function(){
? ? music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
? ? music.play();
}, false);
//小結(jié)//1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常//2.audio元素沒有設(shè)置controls時禁筏，在IOS及Android會占據(jù)空間大小持钉，而在PC端Chrome是不會占據(jù)任何空間
重力感應(yīng)事件
// 運用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機頁面不再受用戶字體縮放強制改變大小每强，但是會有1S左右延時始腾，期間可以考慮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元素容易定位出錯，軟鍵盤彈出時空执，影響fixed元素定位//2.android下fixed表現(xiàn)要比iOS更好浪箭，軟鍵盤彈出時，不會影響fixed元素定位//3.ios4下不支持position:fixed//解決方案：使用Iscroll辨绊，如：
- ? ? ? ? ? ? ?
- ? ? ? ? ? ? ? .....? ? ? ?
//position定位//Android下彈出軟鍵盤彈出時奶栖，影響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è)置border-radius和背景色的時候冻晤，背景色會溢出到圓角以外部分
//3.部分手機(如三星)，a鏈接支持鼠標(biāo):visited事件敏簿，也就是說鏈接訪問后文字變?yōu)樽仙?/p>
//4.android無法同時播放多音頻audio
消除transition閃屏
.css {
? ? -webkit-transform-style: preserve-3d;
? ? -webkit-backface-visibility: hidden;
? ? -webkit-perspective: 1000;
}
開啟硬件加速
//目前明也，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當(dāng)檢測到某個DOM元素應(yīng)用了某些CSS規(guī)則時就會自動開啟惯裕，從而解決頁面閃白温数，保證動畫流暢。
.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圖片實現(xiàn)loading效果（降低CPU消耗蜻势，提升渲染性能）
//使用CSS3代碼代替JS動畫撑刺；
//開啟GPU加速；
//使用base64位編碼圖片(不小圖而言握玛，大圖不建議使用)
? ? // 對于一些小圖標(biāo)够傍，可以使用base64位編碼，以減少網(wǎng)絡(luò)請求挠铲。但不建議大圖使用冕屯，比較耗費CPU。小圖標(biāo)優(yōu)勢在于：
? ? //1.減少HTTP請求拂苹；
? ? //2.避免文件跨域安聘；
? ? //3.修改及時生效；
常用的移動端框架
zepto.js
