html css 适配手机

例：    

　<meta charset='utf-8' />

    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>

    <meta name='apple-mobile-web-app-capable' content='yes' />
    <meta name='apple-mobile-web-app-status-bar-style' content='black' />
    <meta name="format-detection" content="telephone=yes"/>

注释：

1.<meta name="format-detection" content="telephone=yes"/>

在iPhone 手机上默认值是（电话号码显示为拨号的超链接）：

<meta name="format-detection" content="telephone=yes"/>

可将telephone=no，则手机号码不被显示为拨号链接

<meta name="format-detection" content="telephone=no"/>

2.<meta name='apple-mobile-web-app-capable' content='yes' />

Sets whether a web application runs in full-screen mode.

Syntax

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

Discussion

If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Availability

Available in iPhone OS 2.1 and later.

Support Level

Apple extension.

apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

Syntax

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Discussion

This meta tag has no effect unless you first specify full-screen mode as described in “url.”

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

Availability

Available in iPhone OS 2.1 and later.

Support Level

Apple extension.

format-detection

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iPhone.

Syntax

<meta name="format-detection" content="telephone=no">

Discussion

By default, Safari on iPhone detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

Availability

Available in iPhone OS 1.0 and later.

Support Level

Apple extension.

3.<meta name='viewport' content='width=device-width, initial-scale=1.0'/>

这个viewport的元标记是许多智能电话上的支持，从iPhone到Android的webOS（PALM）甚至InternetExplorer Mobile中的Opera Mini和Opera Mobile。

以下是m.yahoo.com上的viewport标记

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

在上面这个代码中，禁止用户进行缩放，你也可以允许让用户自行缩放，代码如下：

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

由于viewport标记并不是所有浏览器都支持，当以上代码无效时，你可以尝试通过其它方式实现，如下：

 <meta name="HandheldFriendly" content="true"/>

或者

 <meta name="MobileOptimized" content="320"/>

 

最后，如果你的网页中的DOCTYPE是XHTML-MP或WML，您的网站将被认定为一个移动优化网站。

Android上的规则属性

官方Android文档中列出了一个特殊的属性，Android已经加入到meta标签：target-densitydpi。这个属性允许开发人员指定屏幕分辨率页面已开发的，或者更具体如何处理的媒体，如图像的缩放。

这里有一个Android下的viewport标签的例子：

 <meta name="viewport" content="target-densitydpi=device-dpi" />