學科: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

參考[編輯 | 編輯原始碼]