学科:IOS/KB/移动页面常用参考
< Subject: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>
响应触摸
编辑其他
编辑获取设备方向
编辑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 才能阻止请求被缓存。
参考
编辑- 官方文档: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