H5項(xiàng)目常見問題匯總及解決方案

marser 發(fā)布于2019-08-20 14:08 / 2938人閱讀

摘要：解決方案可以解決在手機(jī)上點(diǎn)擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計(jì)方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點(diǎn)個變?yōu)閭€。

原文鏈接 - https://github.com/FrontEndRo...

H5項(xiàng)目常見問題及注意事項(xiàng) Meta基礎(chǔ)知識： H5頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面

// 2、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("");
}

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

PC端基礎(chǔ)meta標(biāo)簽

頁面緩存設(shè)置

其他meta標(biāo)簽

常見問題： 移動端如何定義字體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)


打電話給:0755-10086


發(fā)短信給: 10086




點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

點(diǎn)擊我發(fā)郵件

移動端touch事件（區(qū)分webkit和winphone）

// 當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件
// 以下支持webkit
touchstart // 當(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保存的最后一次的信息，最好用于計(jì)算手指信息

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

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

// 以下支持winphone 8
MSPointerDown // 當(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延遲的，往往會造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。
以下是歷史原因，來源一個公司內(nèi)一個同事的分享：
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁能比較好的展示在手機(jī)端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機(jī)上用瀏覽器打開一個PC上的網(wǎng)頁，你可能在看到頁面內(nèi)容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。
雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個元素時候，例如跳轉(zhuǎn)鏈接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會做單擊跳轉(zhuǎn)鏈接的處理，如果t時間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應(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個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個變?yōu)?個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(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)擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
android用戶點(diǎn)擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果；
winphone系統(tǒng),點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景，能通過設(shè)置去掉；
特殊說明：有些機(jī)型去除不了，如小米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; }

超實(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 /* 邊角，兩個滾動條交匯處 */
::-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)大寫

手機(jī)拍照和上傳圖片

屏幕旋轉(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中無法自動播放

// 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)事件

// 運(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左右延時，期間可以考慮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定位

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

android下fixed表現(xiàn)要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位

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"})
    })
}

播放視頻不全屏

JS判斷設(shè)備

function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i0){            
            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.部分手機(jī)(如三星)，a鏈接支持鼠標(biāo):visited事件，也就是說鏈接訪問后文字變?yōu)樽仙?//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圖片實(shí)現(xiàn)loading效果（降低CPU消耗，提升渲染性能）
3、使用CSS3代碼代替JS動畫；
4、開啟GPU加速；
5、使用base64位編碼圖片(僅小圖而言，大圖不建議使用)

對于一些小圖標(biāo)，可以使用base64位編碼，以減少網(wǎng)絡(luò)請求。但不建議大圖使用，比較耗費(fèi)CPU。小圖標(biāo)優(yōu)勢在于：

減少HTTP請求；

避免文件跨域；

修改及時生效；

騰訊方案

var autoScale = function(){
    var ratio = 320/504,   //這是設(shè)計(jì)稿的寬高比（504是Iphone的高度去掉標(biāo)題欄高度）
        winW = document.getElement.clientWidth,
        winH = document.getElement.clientHeight,
        ratio2 = winW/winH,
        scale;
    if(ratio
常用的移動端框架 zepto.js

官網(wǎng)

中文網(wǎng)

瀏覽器檢測

tap事件

云服務(wù)器 GPU云服務(wù)器 Linux常見故障及解決方案云服務(wù)器問題及解決方法解碼器常見故障及解決方法問題匯總

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81441.html

發(fā)表評論

登陸后可評論

0條評論

marser

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2955·2023-04-25 22:16
寶塔面板安裝獨(dú)角數(shù)卡2.x版本(dujiaoka)

閱讀 2119·2021-10-11 11:11
小程序開發(fā)總結(jié)（一）

閱讀 3254·2019-08-29 13:26
前端JQ實(shí)現(xiàn)偽分頁

閱讀 600·2019-08-29 12:32
一道題看透函數(shù)柯里化

閱讀 3419·2019-08-26 11:49
利用VUE異步組件、動態(tài)加載組件，實(shí)現(xiàn)自定義組件順序、動態(tài)綁定傳入子組件的props、動態(tài)綁定監(jiān)聽子

閱讀 2997·2019-08-26 10:30
history和hash詳解

閱讀 1950·2019-08-23 17:59
結(jié)合源碼徹底理解 react事件機(jī)制原理 04 - 事件執(zhí)行

閱讀 1514·2019-08-23 17:57

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

H5項(xiàng)目常見問題匯總及解決方案

相關(guān)文章

Taro 優(yōu)秀學(xué)習(xí)資源匯總

H5手機(jī)端開發(fā)問題匯總及解決方案

H5手機(jī)端開發(fā)問題匯總及解決方案

發(fā)表評論

0條評論

marser

男|高級講師

TA的文章

tensorflow

寶塔面板安裝獨(dú)角數(shù)卡2.x版本(dujiaoka)

小程序開發(fā)總結(jié)（一）

前端JQ實(shí)現(xiàn)偽分頁

一道題看透函數(shù)柯里化

利用VUE異步組件、動態(tài)加載組件，實(shí)現(xiàn)自定義組件順序、動態(tài)綁定傳入子組件的props、動態(tài)綁定監(jiān)聽子

history和hash詳解

結(jié)合源碼徹底理解 react事件機(jī)制原理 04 - 事件執(zhí)行

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

H5項(xiàng)目常見問題匯總及解決方案

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！