學科:IOS/KB/移動頁面常用參考
外觀
< Subject:IOS | KB
例:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
例:
@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" />
- 旋轉屏幕時自動調整字體大小
- 可用值:none | auto(默認) | <percentage>
- 控制用戶是否可以選擇元素
- 可用值:auto | none | text
- 默認長按鏈接會彈出一選擇菜單,可選擇打開還是拷貝鏈接
- 可用值:default | none | inherit
- 設置可點擊元素的高亮顏色
- 可用值:<color>
詳見:Safari Web Content Guide > Handling Events
window.orientation
例:
<link rel="apple-touch-icon" href="icon_url.png" /> <link rel="apple-touch-icon-precomposed" href="icon_url_has_highlight.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
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