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('
');
其他meta標籤
其他meta標籤
行動端如何定義字體font-family
@ --------------------------------------中文字體的英文名稱
@ 黑體 SimHei
@ 微信雅黑 Microsoft Yahei
@ 新宋體體 MingLiU
@ 標楷體 DFKai-SB
@ 楷體 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 瀏覽器會將網頁縮放至原始比例。
🎜
原因就出在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接
//解決方案：
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); }
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=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 ; }
//去掉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();
}, 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(){
$() }
播放影片不全螢幕
JSo 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'){
}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 )
//1.三星Galaxy S4自帶瀏覽器不支援border-radius縮寫
//2.同時設定border-radius和背景色的時候，背景色會溢出到圓角以外部分
//3.部分手機(如三星)，a連結支援滑鼠:visited事件，也就是說連結造訪後文字變成紫色
//4.android無法同時播放多音訊audio
消除transition閃屏
-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.修改於及時
