H5頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁(yè)面
//一、HTML頁(yè)面結(jié)構(gòu)
<meta name="viewport" content="width=device-width,iitial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設(shè)置viewport寬度，為一個(gè)正整數(shù)，或字符串‘device-width’
// height 設(shè)置viewport高度，一般設(shè)置了寬度，會(huì)自動(dòng)解析出高度，可以不用設(shè)置
// initial-scale 默認(rèn)縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// minimum-scale 允許用戶最小縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// maximum-scale 允許用戶最大縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// user-scalable 是否允許手動(dòng)縮放
//二、JS動(dòng)態(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('<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">');
三、Css動(dòng)態(tài)判斷
根據(jù)c3 中的新屬性 calc()
在body中設(shè)置 font-size：calc(100vw/640px*100px); //640的設(shè)計(jì)稿
空白頁(yè)基本meta標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />其他meta標(biāo)簽
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">移動(dòng)端如何定義字體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)
一、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
// 二、發(fā)短信，winphone系統(tǒng)無(wú)效
<a href="sms:10086">發(fā)短信給: 10086</a>
// 三、寫郵件
//注：在添加這些功能時(shí)，第一個(gè)功能以"?"開頭，后面的以"&"開頭
//1.普通郵件
<a href="mailto:863139978@qq.com">點(diǎn)擊我發(fā)郵件</a>
//2.收件地址后添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點(diǎn)擊我發(fā)郵件</a>
//3.跟著抄送地址后，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點(diǎn)擊我發(fā)郵件</a>
//4.包含多個(gè)收件人、抄送、密件抄送人，用分號(hào)(;)隔開多個(gè)郵件人的地址
<a href="mailto:863139978@qq.com;384900096@qq.com">點(diǎn)擊我發(fā)郵件</a>
//5.包含主題，用?subject=
<a href="mailto:863139978@qq.com?subject=郵件主題">點(diǎn)擊我發(fā)郵件</a>
//6.包含內(nèi)容，用?body=;如內(nèi)容包含文本，使用%0A給文本換行
<a href="mailto:863139978@qq.com?body=郵件主題內(nèi)容%0A騰訊誠(chéng)信%0A期待您的到來(lái)">點(diǎn)擊我發(fā)郵件</a>
//7.內(nèi)容包含鏈接，含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">點(diǎn)擊我發(fā)郵件</a>
//8.內(nèi)容包含圖片（PC不支持）
<a href="mailto:863139978@qq.com?body=
//9.完整示例
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠(chéng)邀您參與%0A%0Ahttp://www.baidu.com%0A%0A
- 移動(dòng)端touch事件（區(qū)分webkit和winphone）
/* 當(dāng)用戶手指放在移動(dòng)設(shè)備在屏幕上滑動(dòng)會(huì)觸發(fā)的touch事件 */
// 以下支持webkit
touchstart——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指
touchmove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另?yè)面，會(huì)調(diào)用event的preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁(yè)面滾動(dòng)
touchend——當(dāng)手指離開屏幕時(shí)觸發(fā)
touchcancel——系統(tǒng)停止跟蹤觸摸時(shí)候會(huì)觸發(fā)。例如在觸摸過程中突然頁(yè)面alert()一個(gè)提示框，此時(shí)會(huì)觸發(fā)該事件，這個(gè)事件比較少用
//TouchEvent說明：
touches：屏幕上所有手指的信息
targetTouches：手指在目標(biāo)區(qū)域的手指信息
changedTouches：最近一次觸發(fā)該事件的手指信息
touchend時(shí)，touches與targetTouches信息會(huì)被刪除，changedTouches保存的最后一次的信息，最好用于計(jì)算手指信息
//參數(shù)信息(changedTouches[0])
clientX、clientY在顯示區(qū)的坐標(biāo)
target：當(dāng)前元素
//事件響應(yīng)順序
ontouchstart > ontouchmove > ontouchend > onclick
// 以下支持winphone 8
MSPointerDown——當(dāng)手指觸碰屏幕時(shí)候發(fā)生。不管當(dāng)前有多少只手指
MSPointerMove——當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。通常我們?cè)倩另?yè)面，會(huì)調(diào)用css的html{-ms-touch-action: none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁(yè)面滾動(dòng)
MSPointerUp——當(dāng)手指離開屏幕時(shí)觸發(fā)
- 移動(dòng)端click屏幕產(chǎn)生200-300ms的延時(shí)響應(yīng)
說明：移動(dòng)設(shè)備上的web網(wǎng)頁(yè)是有300ms延遲的，玩玩會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。
以下是歷史原因，來(lái)源一個(gè)公司內(nèi)一個(gè)同事的分享：
2007年蘋果發(fā)布首款iphone上IOS系統(tǒng)搭載的safari為了將適用于PC端上大屏幕的網(wǎng)頁(yè)能比較好的展示在手機(jī)端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機(jī)上用瀏覽器打開一個(gè)PC上的網(wǎng)頁(yè)，你可能在看到頁(yè)面內(nèi)容雖然可以撐滿整個(gè)屏幕，但是字體、圖片都很小看不清，此時(shí)可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內(nèi)容，再次雙擊后能回到原始狀態(tài)。
雙擊縮放是指用手指在屏幕上快速點(diǎn)擊兩次，iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁(yè)縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點(diǎn)擊上，當(dāng)用戶在屏幕上單擊某一個(gè)元素時(shí)候，例如跳轉(zhuǎn)鏈接<a href="#"></a>，此處瀏覽器會(huì)先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點(diǎn)擊鏈接還是要雙擊該部分區(qū)域進(jìn)行縮放操作，所以，捕獲第一次單擊后，瀏覽器會(huì)先Hold一段時(shí)間t，如果在t時(shí)間區(qū)間里用戶未進(jìn)行下一次點(diǎn)擊，則瀏覽器會(huì)做單擊跳轉(zhuǎn)鏈接的處理，如果t時(shí)間里用戶進(jìn)行了第二次單擊操作，則瀏覽器會(huì)禁止跳轉(zhuǎn)，轉(zhuǎn)而進(jìn)行對(duì)該部分區(qū)域頁(yè)面的縮放操作。那么這個(gè)時(shí)間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來(lái)。造成的后果用戶純粹單擊頁(yè)面，頁(yè)面需要過一段時(shí)間才響應(yīng)，給用戶慢體驗(yàn)感覺，對(duì)于web開發(fā)者來(lái)說是，頁(yè)面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個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)。
在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍。 那么，前端的應(yīng)對(duì)方案是：設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2
//例如圖片寬高為：200px*200px，那么寫法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值為原來(lái)的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)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果；
//winphone系統(tǒng),點(diǎn)擊標(biāo)簽產(chǎn)生的灰色半透明背景，能通過設(shè)置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機(jī)型去除不了，如小米2。對(duì)于按鈕類還有個(gè)辦法，不使用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有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
}
// 也可以
- { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">
- 美化表單元素
一、使用appearance改變webkit瀏覽器的默認(rèn)外觀
input,select { -webkit-appearance:none; appearance: none; }
二、winphone下，使用偽元素改變表單元素默認(rèn)外觀
1.禁用select默認(rèn)箭頭，::-ms-expand修改表單控件下拉箭頭，設(shè)置隱藏并使用背景圖片來(lái)修飾
select::-ms-expand { display:none; }
2.禁用radio和checkbox默認(rèn)樣式，::-ms-check修改表單復(fù)選框或單選框默認(rèn)圖標(biāo)，設(shè)置隱藏并使用背景圖片來(lái)修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
3.禁用pc端表單輸入框默認(rèn)清除按鈕，::-ms-clear修改清除按鈕，設(shè)置隱藏并使用背景圖片來(lái)修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; } - 移動(dòng)端字體單位font-size選擇px還是rem
// 如需適配多種移動(dòng)設(shè)備，建議使用rem。以下為參考值：
html { font-size: 62.5%; } //1016 = 62.5%
//設(shè)置12px字體 這里注意在rem前要加上對(duì)應(yīng)的px值，解決不支持rem的瀏覽器的兼容問題，做到優(yōu)雅降級(jí)
body { font-size:12px; font-size:1.2rem; }
12.實(shí)用的CSS樣式
//去掉webkit的滾動(dòng)條——display: none;
//其他參數(shù)
::-webkit-scrollba //滾動(dòng)條整體部分
::-webkit-scrollbar-thumb //滾動(dòng)條內(nèi)的小方塊
::-webkit-scrollbar-track //滾動(dòng)條軌道
::-webkit-scrollbar-button //滾動(dòng)條軌道兩端按鈕
::-webkit-scrollbar-track-piece //滾動(dòng)條中間部分，內(nèi)置軌道
::-webkit-scrollbar-corner //邊角，兩個(gè)滾動(dòng)條交匯處
::-webkit-resizer //兩個(gè)滾動(dòng)條的交匯處上用于通過拖動(dòng)調(diào)整元素大小的小控件
// 禁止長(zhǎng)按鏈接與圖片彈出菜單
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上去掉語(yǔ)音輸入按鈕
input::-webkit-input-speech-button {display: none}
// 阻止windows Phone的默認(rèn)觸摸事件
/說明：winphone下默認(rèn)觸摸事件事件使用e.preventDefault是無(wú)效的，可通過樣式來(lái)禁用，如：/
html { -ms-touch-action:none; } //禁止winphone默認(rèn)觸摸事件
- 取消input在ios下，輸入的時(shí)候英文首字母的默認(rèn)大寫
<input autocapitalize="off" autocorrect="off" /> - 手機(jī)拍照和上傳圖片
//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中無(wú)法自動(dòng)播放
//音頻，寫法一
<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>
優(yōu)先播放音樂bg.ogg，不支持在播放bg.mp3
</audio>
//JS綁定自動(dòng)播放（操作window時(shí)，播放音樂）
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//1.audio元素的autoplay屬性在IOS及Android上無(wú)法使用，在PC端正常
//2.audio元素沒有設(shè)置controls時(shí)，在IOS及Android會(huì)占據(jù)空間大小，而在PC端Chrome是不會(huì)占據(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 ){
//這里是搖動(dòng)后要執(zhí)行的方法
yaoAfter();
}
lastX = x;
lastY = y;
lastZ = z;
}
function yaoAfter(){
//do something
}
18.微信瀏覽器用戶調(diào)整字體大小后頁(yè)面矬了，阻止用戶調(diào)整
//以下代碼可使Android機(jī)頁(yè)面不再受用戶字體縮放強(qiáng)制改變大小，但是會(huì)有1S左右延時(shí)，期間可以考慮loading來(lái)處理
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元素容易定位出錯(cuò)，軟鍵盤彈出時(shí)，影響fixed元素定位
//2.android下fixed表現(xiàn)要比iOS更好，軟鍵盤彈出時(shí)，不會(huì)影響fixed元素定位
//3.ios4下不支持position:fixed
//解決方案：使用Iscroll，如：
<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下彈出軟鍵盤彈出時(shí)，影響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'})
})
} - 播放視頻不全屏
<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;
}
}
消除transition閃屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}開啟硬件加速
//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當(dāng)檢測(cè)到某個(gè)DOM元素應(yīng)用了某些CSS規(guī)則時(shí)就會(huì)自動(dòng)開啟，從而解決頁(yè)面閃白，保證動(dòng)畫流暢。
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}android 2.3 bug
//1.@-webkit-keyframes 需要以0%開始100%結(jié)束，0%的百分號(hào)不能去掉
//2.after和before偽類無(wú)法使用動(dòng)畫animation
//3.border-radius不支持%單位，如要兼容，可以給radius設(shè)置一下較大的值
//4.translate百分比的寫法和scale在一起會(huì)導(dǎo)致失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
