iOS Android Web如何设定Meta使得手机浏览更舒服

博客首页 » iOS Android Web如何设定Meta使得手机浏览更舒服

发布于 22 Apr 2014 08:26
标签 blog
iOS Android Web如何设定Meta使得手机浏览更舒服呢?在iOS中支持如下的Meta设定。

<!-- 可视区域 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height"/>
<!-- 电话号码检测 -->
<meta name="format-detection" content="telephone=no">
<!-- 工具栏 -->
<meta name=”apple-mobile-web-app-capablecontent=”yes/>
<!-- 状态栏 -->
<meta name=”apple-mobile-web-app-status-bar-stylecontent=”default/>
<meta name=”apple-mobile-web-app-status-bar-stylecontent=”black/>
<meta name=”apple-mobile-web-app-status-bar-stylecontent=”black-translucent/>

以下是手册上的信息:

apple-mobile-web-app-capable
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.

viewport
Changes the logical window size used when displaying a page on iPhone.

Syntax
<meta name = "viewport" content = "width = 320,

initial-scale = 2.3, user-scalable = no">

Discussion
Use the viewport meta key to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, you should set the width to the width of the device.

“email” describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements.

When referring to the dimensions of a device, you should use the constants described in “number” instead of hard-coding specific numeric values. For example, use device-width instead of320 for the width, and device-height instead of 480 for the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iPhone infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name = "viewport" content = "width = device-width">

To set the initial scale to 1.0, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 1.0">

To set the initial scale and to turn off user scaling, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

Use the Safari on iPhone console to help debug your webpages as described in “Debugging”. The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.

Availability
Available in iPhone OS 1.0 and later.

Support Level
Apple extension.

Reference:
http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html
http://blog.sina.com.cn/s/blog_4dffbd380100kvht.html


本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • iOS Android Web如何设定Meta使得手机浏览更舒服

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment