控制顯示區(qū)域各種屬性：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - viewport的寬度
height – viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable – 用戶是否可以手動縮放
IOS中Safari允許全屏瀏覽：
<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari頂端狀態(tài)條樣式：
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略將數(shù)字變?yōu)殡娫捥柎a：
<meta content="telephone=no" name="format-detection">
一般情況下，IOS和Android系統(tǒng)都會默認某長度內(nèi)的數(shù)字為電話號碼，即使不加也是會默認顯示為電話的，so，取消這個很有必要！
IOS中Safari設(shè)置保存到桌面圖標(biāo)：
這是IOS中Safari特有的meta，是在你保存某個頁面到桌面的時候使用這張圖作為桌面圖標(biāo)，so，尺寸和iphone上的一致，是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
// 手勢事件
touchstart //當(dāng)手指接觸屏幕時觸發(fā)
touchmove //當(dāng)已經(jīng)接觸屏幕的手指開始移動后觸發(fā)
touchend //當(dāng)手指離開屏幕時觸發(fā)
touchcancel
// 觸摸事件
gesturestart //當(dāng)兩個手指接觸屏幕時觸發(fā)
gesturechange //當(dāng)兩個手指接觸屏幕后開始移動時觸發(fā)
gestureend
// 屏幕旋轉(zhuǎn)事件
onorientationchange
// 檢測觸摸屏幕的手指何時改變方向
orientationchange
// touch事件支持的相關(guān)屬性
touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX // Relative to the screen
screenY // Relative to the screen
pageX // Relative to the full page (includes scrolling)
pageY // Relative to the full page (includes scrolling)
target // Node the touch event originated from
identifier // An identifying number, unique to each touch event
- 屏幕旋轉(zhuǎn)事件：onorientationchange
添加屏幕旋轉(zhuǎn)事件偵聽，可隨時發(fā)現(xiàn)屏幕旋轉(zhuǎn)狀態(tài)（左旋、右旋還是沒旋）。例子：
// 判斷屏幕是否旋轉(zhuǎn)
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("風(fēng)景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};
};
// 添加事件監(jiān)聽
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
- 隱藏地址欄 & 處理事件的時候，防止?jié)L動條出現(xiàn)：
// 隱藏地址欄 & 處理事件的時候 ，防止?jié)L動條出現(xiàn)
addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});
- 雙手指滑動事件：
// 雙手指滑動事件
addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;},
false // 兼容各瀏覽器，表示在冒泡階段調(diào)用事件處理程序 (true 捕獲階段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //對 delta 值進行判斷(比如正負) ，而后執(zhí)行相應(yīng)操作
return true;
};
- 判斷是否為iPhone：
// 判斷是否為 iPhone ：
function isAppleMobile() {
return (navigator.platform.indexOf('iPad') != -1);
};
- localStorage:
例子 ：（注意數(shù)據(jù)名稱 n 要用引號引起來）
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名稱是 n 的數(shù)據(jù)存在 ，則將其讀出 ，賦予變量 v 。
localStorage.setItem('n', v); // 寫入名稱為 n、值為 v 的數(shù)據(jù)
localStorage.removeItem('n'); // 刪除名稱為 n 的數(shù)據(jù)
- 使用特殊鏈接：
如果你關(guān)閉自動識別后 ，又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 ，那么可以通過這樣來聲明電話鏈接 ,
<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發(fā)短信</a>
或用于單元格：
<td onclick="location.href='tel:122'">
- 自動大寫與自動修正
要關(guān)閉這兩項功能，可以通過autocapitalize 與autocorrect 這兩個選項：
<input type="text" autocapitalize="off" autocorrect="off" />
