加载中…
个人资料
素水凌心
素水凌心
  • 博客等级:
  • 博客积分:0
  • 博客访问:69,089
  • 关注人气:36
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

移动终端浏览器初始设置apple-mobile-web-app-capable

(2010-07-27 17:24:44)
标签:

杂谈

分类: 精品收藏

移动终端浏览器默认设置视口的宽度和初始规模。
最近做的一个移动终端的项目,遇到一个默认设置更改的问题。起初非常怀疑是自己的html写的有问题。经过一番页面尺寸的测试之后终于找到问题根源。知道是什么问题就可以找解决的方法了。
<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">
在页面的头部文件中加入了以上设定就ok了。以下是找到的有关于这些设定的解析。记录下来避免忘记。
然而这些设定只在移动终端的浏览器中有效,非移动终端浏览器这些设定是无效的。并且要这些浏览器是基于iPhone而来的。初次涉及移动终端的应用,恼人的事情不只这一件呢,呵呵O(∩_∩)O~  然,这件事情最有价值啊!

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.

 

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有