學科:IOS/KB/移動頁面常用參考

viewpoint

例：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

CSS @media

例：

@media screen and (max-device-width: 480px) {}

例：

<link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" />
<link rel="stylesheet" media="screen and (min-width: 321px)" href="landscape.css" />
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css" />

CSS屬性

-webkit-text-size-adjust

旋轉屏幕時自動調整字體大小

可用值：none | auto（默認） | <percentage>

-webkit-user-select

控制用戶是否可以選擇元素

可用值：auto | none | text

-webkit-touch-callout

默認長按連結會彈出一選擇菜單，可選擇打開還是拷貝連結

可用值：default | none | inherit

-webkit-tap-highlight-color

設置可點擊元素的高亮顏色

可用值：<color>

響應觸摸

詳見：Safari Web Content Guide > Handling Events

其他

獲取設備方向

window.orientation

保存圖標（apple-touch-icon）

例：

<link rel="apple-touch-icon" href="icon_url.png" />
<link rel="apple-touch-icon-precomposed" href="icon_url_has_highlight.png" />

頁面保存為桌面圖標後隱藏地址欄（apple-mobile-web-app-capable）

<meta name="apple-mobile-web-app-capable" content="yes" />

FAQ

iOS 6 POST 緩存

iOS 6 上需設置 http header 的 Cache-Control 為 no-cache 才能阻止請求被緩存。

詳見： http://stackoverflow.com/q/12506897

參考

• 官方文檔：Safari Web Content Guide
• http://pattern.dk/sun/ —— 經典天氣Web App
• A Primer on Hybrid Apps for iOS - Cocoa Controls
• Swift Example
• 淘寶移動端Web開發最佳實踐
• Understanding the iOS6 AJAX bugs - Guillermo Rauch
• iOS Webapp的桌面圖標及更新 http://himeters.com/update-ios-webapp-touch-icon
• Hide the Address Bar within Mobile Web Applications http://davidwalsh.name/hide-address-bar