H5 項目問題總結
阿新 • • 發佈：2017-05-15
gpu加速 目標 兩個 -h indexof ast eat androi 透明
//一、HTML頁面結構 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設置viewport寬度，為一個正整數，或字符串‘device-width’ // height 設置viewport高度，一般設置了寬度，會自動解析出高度，可以不用設置 // initial-scale 默認縮放比例，為一個數字，可以帶小數
// minimum-scale 允許用戶最小縮放比例，為一個數字，可以帶小數// maximum-scale 允許用戶最大縮放比例，為一個數字，可以帶小數 // user-scalable 是否允許手動縮放 //二、JS動態判斷 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">‘); }
<!-- 設置縮放 -->
<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頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 啟用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別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應用模式 --> <meta name="browsermode" content="application">
<!-- QQ應用模式 --> <meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no">
@ --------------------------------------中文字體的英文名稱 @ 宋體 SimSun @ 黑體 SimHei @ 微信雅黑 Microsoft Yahei @ 微軟正黑體 Microsoft JhengHei @ 新宋體 NSimSun @ 新細明體 MingLiU @ 細明體 MingLiU @ 標楷體 DFKai-SB @ 仿宋 FangSong @ 楷體 KaiTi @ 仿宋_GB2312 FangSong_GB2312 @ 楷體_GB2312 KaiTi_GB2312 @ @ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica body { font-family: Microsoft Yahei,SimSun,Helvetica; }
// 一、打電話 <a href="tel:0755-10086">打電話給:0755-10086</a> // 二、發短信，winphone系統無效 <a href="sms:10086">發短信給: 10086</a> // 三、寫郵件 //註：在添加這些功能時，第一個功能以"?"開頭，後面的以"&"開頭
//1.普通郵件 <a href="mailto:[email protected]">點擊我發郵件</a> //2.收件地址後添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
<a href="mailto:[email protected]?cc[email protected]">點擊我發郵件</a>
//3.跟著抄送地址後，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題） <a href="mailto:[email protected][email protected]&bcc[email protected]">點擊我發郵件</a>
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址 <a href="mailto:[email protected];[email protected]">點擊我發郵件</a>
//5.包含主題，用?subject= <a href="mailto:[email protected]?subject=郵件主題">點擊我發郵件</a>
//6.包含內容，用?body=;如內容包含文本，使用%0A給文本換行 <a href="mailto:[email protected]?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點擊我發郵件</a>
//7.內容包含鏈接，含http(s)://等的文本自動轉化為鏈接 <a href="mailto:[email protected]?body=http://www.baidu.com">點擊我發郵件</a>
//8.內容包含圖片（PC不支持） <a href="mailto:[email protected]?body=<img src=‘images/1.jpg‘ />">點擊我發郵件</a>
//9.完整示例 <a href="mailto:[email protected];[email protected][email protected]&[email protected]&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0Ahttp://www.baidu.com%0A%0A<img src=‘images/1.jpg‘ />">點擊我發郵件</a>
/* 當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件 */ // 以下支持webkit
touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指
touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動 touchend——當手指離開屏幕時觸發
touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用 //TouchEvent說明：
touches：屏幕上所有手指的信息 targetTouches：手指在目標區域的手指信息 changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息 //參數信息(changedTouches[0]) clientX、clientY在顯示區的坐標 target：當前元素 //事件響應順序 ontouchstart > ontouchmove > ontouchend > onclick // 以下支持winphone 8
MSPointerDown——當手指觸碰屏幕時候發生。不管當前有多少只手指 MSPointerMove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止默認情況的發生：阻止頁面滾動 MSPointerUp——當手指離開屏幕時觸發
Rentina顯示屏原理及設計方案
說明：retina屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍。
那麽，前端的應對方案是：設計稿切出來的圖片長寬保證為偶數，並使用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設計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
點擊元素產生背景或邊框怎麽去掉
/ios用戶點擊一個鏈接，會出現一個半透明灰色遮罩, 如果想要禁用，可設置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；
//winphone系統,點擊標簽產生的灰色半透明背景，能通過設置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標簽，直接用div標簽
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下
<meta name="msapplication-tap-highlight" content="no">
美化表單元素
//一、使用appearance改變webkit瀏覽器的默認外觀
input,select { -webkit-appearance:none; appearance: none; }
//二、winphone下，使用偽元素改變表單元素默認外觀
//1.禁用select默認箭頭，::-ms-expand修改表單控件下拉箭頭，設置隱藏並使用背景圖片來修飾
select::-ms-expand { display:none; }
//2.禁用radio和checkbox默認樣式，::-ms-check修改表單復選框或單選框默認圖標，設置隱藏並使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
//3.禁用pc端表單輸入框默認清除按鈕，::-ms-clear修改清除按鈕，設置隱藏並使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
移動端字體單位font-size選擇px還是rem
// 如需適配多種移動設備，建議使用rem。以下為參考值：
html { font-size: 62.5%; } //10*16 = 62.5%
//設置12px字體 這裏註意在rem前要加上對應的px值，解決不支持rem的瀏覽器的兼容問題，做到優雅降級
body { font-size:12px; font-size:1.2rem; }
超實用的CSS樣式
//去掉webkit的滾動條——display: none;
//其他參數
::-webkit-scrollba //滾動條整體部分
::-webkit-scrollbar-thumb //滾動條內的小方塊
::-webkit-scrollbar-track //滾動條軌道
::-webkit-scrollbar-button //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece //滾動條中間部分，內置軌道
::-webkit-scrollbar-corner //邊角，兩個滾動條交匯處
::-webkit-resizer //兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件
// 禁止長按鏈接與圖片彈出菜單
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的默認觸摸事件
/*說明：winphone下默認觸摸事件事件使用e.preventDefault是無效的，可通過樣式來禁用，如：*/
html { -ms-touch-action:none; } //禁止winphone默認觸摸事件
取消input在ios下，輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
手機拍照和上傳圖片
//IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持 <input type="file" accept="images/*" /> <input type="file" accept="video/*" />
屏幕旋轉的事件和樣式
//JS處理
function orientInit(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?‘landscape‘:‘portrait‘;
if(orientChk ==‘lapdscape‘){
//這裏是橫屏下需要執行的事件
}else{
//這裏是豎屏下需要執行的事件
}
}
orientInit();
window.addEventListener(‘onorientationchange‘ in window?‘orientationchange‘:‘resize‘, function(){
setTimeout(orientInit, 100);
},false)
//CSS處理
//豎屏時樣式
@media all and (orientation:portrait){ }
//橫屏時樣式
@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>
優先播放音樂bg.ogg，不支持在播放bg.mp3
</audio>
//JS綁定自動播放（操作window時，播放音樂）
$(window).one(‘touchstart‘, function(){
music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小結
//1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常
//2.audio元素沒有設置controls時，在IOS及Android會占據空間大小，而在PC端Chrome是不會占據任何空間
重力感應事件
// 運用HTML5的deviceMotion，調用重力感應事件
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 ){
//這裏是搖動後要執行的方法
yaoAfter();
}
lastX = x;
lastY = y;
lastZ = z;
}
function yaoAfter(){
//do something
}
微信瀏覽器用戶調整字體大小後頁面矬了，怎麽阻止用戶調整
//以下代碼可使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禁止用戶調整字體大小
body { -webkit-text-size-adjust:100%!important; }
//最好的解決方案：最好使用rem或百分比布局
定位的坑
//fixed定位
//1.ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
//2.android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響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下彈出軟鍵盤彈出時，影響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的設備（如：音箱、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判斷設備
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%結束，0%的百分號不能去掉 //2.after和before偽類無法使用動畫animation //3.border-radius不支持%單位，如要兼容，可以給radius設置一下較大的值
//4.translate百分比的寫法和scale在一起會導致失效，例如： -webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
android 4.x bug
//1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫 //2.同時設置border-radius和背景色的時候，背景色會溢出到圓角以外部分 //3.部分手機(如三星)，a鏈接支持鼠標:visited事件，也就是說鏈接訪問後文字變為紫色
//4.android無法同時播放多音頻audio
消除transition閃屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
開啟硬件加速
//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，
當檢測到某個DOM元素應用了某些CSS規則時就會自動開啟，從而解決頁面閃白，保證動畫流暢。
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
渲染優化
//1.禁止使用iframe（阻塞父文檔onload事件）
//2.禁止使用gif圖片實現loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代碼代替JS動畫；
//開啟GPU加速；
//使用base64位編碼圖片(不小圖而言，大圖不建議使用)
// 對於一些小圖標，可以使用base64位編碼，以減少網絡請求。但不建議大圖使用，比較耗費CPU。小圖標優勢在於：
//1.減少HTTP請求；
//2.避免文件跨域；
//3.修改及時生效；
H5 項目問題總結