控制顯示區域各種屬性：
<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頂端狀態條樣式：
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略將數字變為電話號碼：
<meta content="telephone=no" name="format-detection">
一般情況下，IOS和Android系統都會默認某長度內的數字為電話號碼，即使不加也是會默認顯示為電話的，so，取消這個很有必要！
IOS中Safari設置保存到桌面圖標：
這是IOS中Safari特有的meta，是在你保存某個頁面到桌面的時候使用這張圖作為桌面圖標，so，尺寸和iphone上的一致，是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
// 手勢事件
touchstart
//當手指接觸屏幕時觸發
touchmove
//當已經接觸屏幕的手指開始移動后觸發
touchend
//當手指離開屏幕時觸發
touchcancel
// 觸摸事件
gesturestart
//當兩個手指接觸屏幕時觸發
gesturechange
//當兩個手指接觸屏幕后開始移動時觸發
gestureend
// 屏幕旋轉事件
onorientationchange
// 檢測觸摸屏幕的手指何時改變方向
orientationchange
// touch事件支持的相關屬性
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
|
4. 屏幕旋轉事件：onorientationchange
添加屏幕旋轉事件偵聽，可隨時發現屏幕旋轉狀態（左旋、右旋還是沒旋）。例子：
// 判斷屏幕是否旋轉
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(
"風景模式 180,screen-width: "
+ screen.width +
"; screen-height:"
+ screen.height);
break
;
};<br>};
// 添加事件監聽
addEventListener(
'load'
,
function
(){
orientationChange();
window.onorientationchange = orientationChange;
});
|
5. 隱藏地址欄 & 處理事件的時候，防止滾動條出現：
// 隱藏地址欄 & 處理事件的時候 ，防止滾動條出現
addEventListener(
'load'
,
function
(){
setTimeout(
function
(){ window.scrollTo(0, 1); }, 100);
});
|
6. 雙手指滑動事件：
// 雙手指滑動事件
addEventListener(
'load'
,
function
(){ window.onmousewheel = twoFingerScroll;},
false
// 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段)
);
function
twoFingerScroll(ev) {
var
delta =ev.wheelDelta/120;
//對 delta 值進行判斷(比如正負) ，而后執行相應操作
return
true
;
};
|
7. 判斷是否為iPhone：
// 判斷是否為 iPhone ：
function
isAppleMobile() {
return
(navigator.platform.indexOf(
'iPad'
) != -1);
};
|
8. localStorage:
例子 ：（注意數據名稱 n 要用引號引起來）
var
v = localStorage.getItem(
'n'
) ? localStorage.getItem(
'n'
) :
""
;
// 如果名稱是 n 的數據存在 ，則將其讀出 ，賦予變量 v 。
localStorage.setItem(
'n'
, v);
// 寫入名稱為 n、值為 v 的數據
localStorage.removeItem(
'n'
);
// 刪除名稱為 n 的數據
|
9. 使用特殊鏈接：
如果你關閉自動識別后 ，又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 ，那么可以通過這樣來聲明電話鏈接 ,
<
a
href
=
"tel:12345654321"
>打電話給我</
a
>
<
a
href
=
"sms:12345654321"
>發短信</
a
>
或用於單元格：
<
td
onclick
=
"location.href='tel:122'"
>
|
10. 自動大寫與自動修正
要關閉這兩項功能，可以通過autocapitalize 與autocorrect 這兩個選項：
<
input
type
=
"text"
autocapitalize
=
"off"
autocorrect
=
"off"
/>
|