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

Meta基礎：

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

//一、HTML頁面結構

// width    view

// width  'device-width'

// height   設定viewport高度，一般設定了寬度，會自動解析出高度，可以不用設定

// initial-scale    縮放比例，為一個數字，可以帶小數

/ minimum-scale    允許使用者最小縮放比例，為一個數字，可以帶小數

// maximum-scale    允許用戶最大縮放比例，為一個數字，可以帶小數

// user-scalableable  

//二、JS動態判斷

var phoneWidth =  parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var phoneScale = phoneWidth/640;

if (varator_ovarator_ovaratord . )/.test(ua)){

    var version = parseFloat(RegExp.$1);

    if(version>   }else{

        document. write('

');

    }

} else {

    document.write('

');

其他meta標籤

其他meta標籤

 

常見問題：

行動端如何定義字體font-family

@ --------------------------------------中文字體的英文名稱

@ 宋體     SimSun

@ 黑體     SimHei

@ 微信雅黑  Microsoft Yahei

@ 微軟正黑體Microsoft JhengHei

@ 新宋體體   MingLiU

@ 標楷體   DFKai-SB

@ 仿宋    FangSong

@ 楷體    KaiTi

@ 仿宋_GB2312  FangSong_GB2312

@ 仿宋_GB2312  FangSong_GB2312

@

@ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica

 

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

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

// 一、打電話

發短信，winphone系統無效

發短信給: 10086

 

// 三、寫郵件

//註：在加入這些功能時，第一個功能以"?"開頭，後面的以"&"開頭

//1.普通郵件

點擊我發郵件

//2.收件地址後新增?cc=開頭，可新增副本地址（Android有相容問題）

點擊我發郵件

//3.跟著抄送地址後，寫上&bcc=,可新增密件抄送地址（Android有相容問題）

點擊我發郵件

//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址

點擊我發郵件

//5.包含主題，用?subject=

點擊我發郵件

//6.包含內容，用?body=; %0A給文字換行

點擊我發郵件

//7.內容包含鏈接，含http(s)://等的文本自動轉化為鏈接

點擊我發郵件

/ 8.內容包含圖片（PC不支援）

點我發郵件

//9.完整範例

點我發郵件

手機機

">點擊我發郵件

）

/* 當使用者手指放在行動裝置在螢幕上滑動會觸發的touch事件*/

// 以下支援webkit

touchstart－當手指觸碰螢幕時發生。不管目前有多少隻手指

touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動

touchend——當手指離開螢幕時觸發

touchcancel——系統停止追蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

 

//TouchEvent說明：

touches：屏幕上所有手指的信息

targetTouches

touches：屏幕上所有手指的信息

targetTouches：手指在目標區域的手指信息

changedTouches：最近一次觸發該事件的手指信息

touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息

 

//參數資訊(changedTouches[0])

clientX、clientY在顯示區的座標

target：目前元素

 

//事件回應順序

ontouchstart //以下支援winphone 8

MSPointerDown—當手指觸碰螢幕時發生。不管目前有多少隻手指

MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動

MSPointerUp——當手指離開螢幕時觸發

移動端click螢幕產生200-300ms的延遲回應

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

 

以下是歷史原因，來源一個公司內一個同事的分享：

2007年蘋果發布首款iphone上IOS系統搭載的safari為了將適用於PC端上大屏幕的網頁能比較好的展示在款iphone上IOS系統搭載的safari為了將適用於PC端上大屏幕的網頁能比較好的展示在款手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊螢幕上的某一部分，就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

 

雙擊縮放是指用手指在螢幕上快速點擊兩次，iOS 隨附的 Safari 瀏覽器會將網頁縮放至原始比例。

 🎜

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

 

//解決方案：

fastclick可以解決在手機上點擊事件的300ms延遲

zepto的touch模組，tap事件也是為了解決在clicks的延遲問題

.

說明：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圖像而生。

.css {

    background: url(images/bg.jpg) no-repeat center;

    background: -web？ age- set普通螢幕

    url(images/bg-2x.jpg) 2x); //支援image-set的Rentinan

}

ios機產生背景或邊框怎麼去點擊

}

ios機產生背景或邊框怎麼去點擊

}

/

ios出現一個半透明灰色遮罩, 如果想要停用，可設定-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；

//android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；

//winphone系統,點擊標籤產生的灰色半透明背景，能透過設定

去掉；

//特殊說明：有些機型去除不了，如小米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下

ance表單元素

美化

/一、使用appearance/web器的預設外觀

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-resizerizer 捲軸的交會處上用於透過拖曳調整元素大小的小控制

 

// 禁止長按連結與圖片彈出式選單

a,img { -webkit-touch-callout: none } // 禁止ios與android使用者選取文字

html,body {-webkit-user-select:none; user-select: none; }

 

// 改變輸入框placeholder的顏色值

kit

::-webkit -input-placeholder { /* WebKit browsers */

color: #999; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #999; -placeholder { /* Mozilla Firefox 19+ */

color: #999; }

:-ms-input-placeholder { /* Internet Explorer 10+ */

color: #999; }

in; ::-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下，輸入的時候英文首字母的預設大寫

手機拍照和上傳圖片

/IOS有拍攝圖片功能，部分Android只有選擇本機圖片功能。 Winphone不支援

螢幕旋轉的事件和樣式

//JS處理

function orientInit(){

🠎. documentElement.clientHeight?'landscape ':'portrait';

    if(orientChk =='lapdscape'){

        //這裡是橫向螢幕下螢幕下需要執行的事件

    }

}

 

orientInit();

window.addEventListener('onorientationchange' in window?'orientation':'resize', function" );

}, false)    

 

//CSS處理

//垂直屏時樣式

@media all and (orientation:portrait){   )🜥🜥或橫向屏時樣式en 樣式{   }

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

//音頻，寫法一

你的瀏覽器還不支援哦

    

    

    播放（操作window時，播放音樂）

$ (window).one('touchstart', function(){

    music.play();

})

 //微信下相容於處理

 

//微信下相容處理

.

    music.play();

}, false);

 

//小結

//1.audio元素的autoplay屬性在.audio元素沒有設定controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間

重力感應事件

// 運用HTML5的deviceMotion，調用重力感應事件

if (window.DeviceMotionEvent){

    document.addEventListener('devicemotion', deviceMotionHandler, false)

}   

= hahhaah = 0;

function deviceMotionHandler(eventData){

    var acceleration = event.accelerationIncludingGravity;

    x = acceleration.x;

     if(Math.abs(x-lastX)>speed || Math. abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){

        //這裡是搖晃後執行的方法

    lastX = x;

    lastY = y;

    lastZ = z;

}

 

function yaoAfter(){

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

微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整

//以下程式碼可使Android機頁面不再受用戶字體縮放強制改變大小，但是會有1S左右延時，期間可以考慮loading來處理

if (typeof(WeixinJSBridge) == "undefined") {

    document.addEventListener("WeixinJSBridgeReady            WeixinJSBridge.invoke(' setFontSizeCallback', { 'fontSize':0}, function(res){

                alert(JSON         }, 0)

    });

}else{  

setTimeout(function(){

        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, 

        })

    }, 0 )   

}

 

//IOS下可使用-webkit-text-size-adjust禁止使用者調整字體大小

body { -webkit-text-size-adjust:100%

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

定位的坑

//fixed定位

//1.ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位

//2.android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位

//3.ios4下不支援position:fixed

//解決方案：使用[Iscroll ](http://cubiq.org/iscroll-5)，如：

        

               .....

        

<script></script>

    var myscroll;

    function loaded(){

        myscroll=new iScroll("wrapper");

    }

    window.addEventListener("DOMContentLoaded",loaded,false);

 

 

//position定位

//Android下彈出軟鍵盤彈出時，影響absolute元素定位

ator

機//Android下彈出式鍵盤彈出時，影響absolute元素（Penvaratorsf. 'Android');

if(ua>-1){

    $('.ipt').on('focus', function(){

     ').on('focus', function(){

     '). ':'hidden'})

    }).on('blur', function(){

        $()🠎 }

播放影片不全螢幕

ator

機

JS o.

var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    

    for(var i=0; i        if(ua.indexOf(agent[i])>0){         

  

    }

}

deviceType();

window.addEventListener('resize', function( ){

    deviceType();

})

JS判斷微信瀏覽器

function isWeixin(){

🠟);  if(ua.match(/MicroMessenger /i)=='micromessenger'){

        return true;

    }else{

   

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;

    

}

開啟硬體加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支援硬體加速，當偵測到某個DOM元素應用了某些CSS規則時就會自動開啟，從而解決頁面閃白，保證動畫流暢。

.css {

    -webkit-transform: translate3d(0,0,0);

    -moz-transform: translate3d(0,0,0,0); 0);

    transform: translate3d(0,0,0);

}

渲染優化

//1.禁止使用iframe（阻塞父親實現loading效果（降低CPU消耗，提升渲染性能）

//使用CSS3代碼代替JS動畫；

//開啟GPU加速；

//使用base64位編碼圖片(不小圖而言，大圖不建議使用)

    // 對於一些小圖標，可以使用base64位元編碼，以減少網路請求。但不建議大圖使用，比較耗費CPU。小圖示優點在於：

    //1.減少HTTP請求；

    //2.避免使用文件跨域；

    //3.修改於及時