天天看點
傳回

H5項目常見問題及注意事項 H5項目常見問題及注意事項

H5項目常見問題及注意事項

Meta基礎知識：

H5頁面視窗自動調整到裝置寬度，并禁止使用者縮放頁面 

//一、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/;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
    var version = parseFloat(RegExp.$);
    if(version>){
        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">');
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

空白頁基本meta标簽 

<!-- 設定縮放 -->
<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" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

PC端基礎meta标簽 

<!-- 頁面關鍵詞-->
<meta name="keywords" content="your tags" />
<!-- 頁面描述-->
<meta name="description" content="150 words" />
<!-- 搜尋引擎索引方式：robotterms是一組使用逗号(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。確定正确使用nofollow和noindex屬性值。-->
<meta name="robots" content="index,follow" />
<!--
    all：檔案将被檢索，且頁面上的連結可以被查詢；
    none：檔案将不被檢索，且頁面上的連結不可以被查詢；
    index：檔案将被檢索；
    follow：頁面上的連結可以被查詢；
    noindex：檔案将不被檢索；
    nofollow：頁面上的連結不可以被查詢。
 -->

 <!-- 頁面重定向和重新整理：content内的數字代表時間（秒），既多少時間後重新整理。如果加url,則會重定向到指定網頁（搜尋引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。-->
 <meta http-equiv="refresh" content="0;url=" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

頁面緩存設定 

<!-- 清除緩存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  • 1
  • 2
  • 3
  • 4

其他meta标簽 

<!-- 啟用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">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

常見問題：

移動端如何定義字型font-family 

@ --------------------------------------中文字型的英文名稱
@ 宋體      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; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

打電話發短信寫郵件怎麼實作 

// 一、打電話
<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][email protected]">點選我發郵件</a>
//3.跟着抄送位址後，寫上&bcc=,可添加密件抄送位址（Android存在相容問題）
<a href="mailto:[email protected][email protected]&[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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

移動端touch事件（區分webkit和winphone） 

/* 當使用者手指放在移動裝置在螢幕上滑動會觸發的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——當手指離開螢幕時觸發
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

移動端click螢幕産生200-300ms的延時響應 

說明：移動裝置上的web網頁是有ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。

以下是曆史原因，來源一個公司内一個同僚的分享：
年蘋果釋出首款iphone上IOS系統搭載的safari為了将适用于PC端上大螢幕的網頁能比較好的展示在手機端上，使用了輕按兩下縮放(double tap to zoom)的方案，比如你在手機上用浏覽器打開一個PC上的網頁，你可能在看到頁面内容雖然可以撐滿整個螢幕，但是字型、圖檔都很小看不清，此時可以快速輕按兩下螢幕上的某一部分，你就能看清該部分放大後的内容，再次輕按兩下後能回到原始狀态。

輕按兩下縮放是指用手指在螢幕上快速點選兩次，iOS 自帶的 Safari 浏覽器會将網頁縮放至原始比例。

原因就出在浏覽器需要如何判斷快速點選上，當使用者在螢幕上單擊某一個元素時候，例如跳轉連結<a href="#"></a>，此處浏覽器會先捕獲該次單擊，但浏覽器不能決定使用者是單純要點選連結還是要輕按兩下該部分區域進行縮放操作，是以，捕獲第一次單擊後，浏覽器會先Hold一段時間t，如果在t時間區間裡使用者未進行下一次點選，則浏覽器會做單擊跳轉連結的處理，如果t時間裡使用者進行了第二次單擊操作，則浏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對于web開發者來說是，頁面js捕獲click事件的回調函數處理，需要ms後才生效，也就間接導緻影響其他業務邏輯的處理。

//解決方案：
fastclick可以解決在手機上點選事件的ms延遲
zepto的touch子產品，tap事件也是為了解決在click的延遲問題
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

點選元素産生背景或邊框怎麼去掉 

/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">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

美化表單元素 

//一、使用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; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

移動端字型機關font-size選擇px還是rem 

// 如需适配多種移動裝置，建議使用rem。以下為參考值：
html { font-size: %; }   //10*16 = 62.5%
//設定12px字型   這裡注意在rem前要加上對應的px值，解決不支援rem的浏覽器的相容問題，做到優雅降級
body { font-size:px; font-size:rem; }
  • 1
  • 2
  • 3
  • 4

超實用的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預設觸摸事件
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

取消input在ios下，輸入的時候英文首字母的預設大寫 

<input autocapitalize="off" autocorrect="off" />
  • 1

手機拍照和上傳圖檔 

//IOS有拍照、錄像、選取本地圖檔功能，部分Android隻有選擇本地圖檔功能。Winphone不支援
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />
  • 1
  • 2
  • 3

螢幕旋轉的事件和樣式 

//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, );
},false)    

//CSS處理
//豎屏時樣式
@media all and (orientation:portrait){   }
//橫屏時樣式
@media all and (orientation:landscape){   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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是不會占據任何空間
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

重力感應事件 

// 運用HTML5的deviceMotion，調用重力感應事件
if(window.DeviceMotionEvent){
    document.addEventListener('devicemotion', deviceMotionHandler, false)
}   

var speed = ;
var x = y = z = lastX = lastY = lastZ = ;
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
}

//說明：說見案例搖一搖效果中yao.js
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

微信浏覽器使用者調整字型大小後頁面矬了，怎麼阻止使用者調整 

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

//IOS下可使用 -webkit-text-size-adjust禁止使用者調整字型大小
body { -webkit-text-size-adjust:%!important; }

//最好的解決方案：最好使用rem或百分比布局
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

定位的坑 

//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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

播放視訊不全屏 

<!--
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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

JS判斷裝置 

function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=; i<len,len = agent.length; i++){
        if(ua.indexOf(agent[i])>){         
            break;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

JS判斷微信浏覽器 

function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

渲染優化 

//1.禁止使用iframe（阻塞父文檔onload事件）
//2.禁止使用gif圖檔實作loading效果（降低CPU消耗，提升渲染性能）
//使用CSS3代碼代替JS動畫；
//開啟GPU加速；
//使用base64位編碼圖檔(不小圖而言，大圖不建議使用)
    // 對于一些小圖示，可以使用base64位編碼，以減少網絡請求。但不建議大圖使用，比較耗費CPU。小圖示優勢在于：
    //1.減少HTTP請求；
    //2.避免檔案跨域；
    //3.修改及時生效；
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

常用的移動端架構

  • zepto.js 
    • 官網
    • 中文網
    • 浏覽器檢測
    • tap事件
原作者項目位址：FrontEndZQ/HTML5-FAQ
html5 移動WEB開發
上一篇: linux高速緩存dns之正向解析、反向解析、雙向解析
下一篇: 面試命中率90%的點——MySQL索引

繼續閱讀