Answers
移动meta标签
移动版的webkit浏览器支持一些比较特性，能带来更好的的浏览体验。
Viewport设置
最先要设置的meta属性就是viewport。设置viewport告诉浏览器，网页内容应该怎么样去适应设备的屏幕，同时对设备的屏幕进行优化。例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >
Note: width能用px单位，如设置width=320和设置width=device-width在iphone和其它一些智能手机上的效果一样。但并不是所有手机都是这个宽度，所以最好设置device-width让浏览器自己去识别。
Android对viewport标签进行了扩展:
<meta name="viewport" content="target-densitydpi=device-dpi">
target-densitydpi的值有 device-dpi, high-dpi, medium-dpi, low-dpi.
如果你要为网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有灵活性。
全屏浏览
在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
HTML4和CSS2支持 media-dependent style sheets有一段时间了，例如
<link rel="stylesheet" media="print" href="printer.css">
能针对打印设备自动改变样式。CSS3则对媒体类型进行了扩展和优化。你能对媒体类型进行修改定制和扩展，就不需要特意为其它设备编写新样式表，只要在现有样式上改改就好了。
能设置media属性有screen width, device width, orientation等。
屏幕尺寸定位
在下面的例子，phone.css将适用于手持设备或屏幕宽度<= 320px的设备。
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
在media里加上 “only” 关键字，能让不兼容CSS3的浏览器自动忽略这条规则。
下面的是适应641px到800px的屏幕:
<link rel="stylesheet" media="only screenshot and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
Media标记也能用在<style>标签里：
<style> @media only all and (orientation: portrait) { ... }</style>media=”handheld”（手持设备）
我们需要暂停一下讨论手持设备。事实上是，Android和iOS会忽略media="handheld"。这是因为开发者只为高端移动设备开发mobile版本。不同浏览器会用不同方式去解析它。
- 有的只载入handheld样式，
- 有的默认载入screen样式，但如果有handheld则载入handheld样式
- 有的两种都读
- 有的只读screen样式
怎么样对html5rocks这个网站使用media属性
在每个页面的<head>标签，你会看到：
<link rel="stylesheet" media="all" href="/static/css/base.min.css" /><link rel="stylesheet" media="only screen and (max-width: 800px)" href="/static/css/mobile.min.css" />
Base.css是为桌面浏览器制定的样式，mobile.css则是为宽度800px以下的屏幕制定的。范围从智能手机的（320px）到iPad的（768px）。主要是通过覆盖base.css里的样式（除了几个必须的）来使网页很适合移动设备。 一些mobile.css覆盖的样式：
- 减少整站额外的空白/间距，小屏幕的空间是很紧凑的。
- 移除:hover样式，这在触摸屏上没用。
- 将布局调整为单列。
- 移除主容器的box-shadow效果，大容器的阴影效果会影响页面性能。
- 用css容器模块（box-ordinal-group）来改变主页上各部分的顺序。
- 移除透明(opacity)效果，这也影响性能。要看这个meta的更多选项，请看 Safari reference documentation
Home 界面上的图标
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
看看html5rocks使用的移动meta标签
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
...
</head>
垂直布局
在小屏幕中，垂直滚动比水平滚动方便很多，保持内容单列，垂直布局对移动设备最有利。
暴君T233
answered 9 years, 9 months ago
