移动终端浏览器初始设置apple-mobile-web-app-capable
2014-07-18 11:22
597 查看
转自http://blog.sina.com.cn/s/blog_4dffbd380100kvht.html
移动终端浏览器默认设置视口的宽度和初始规模。
最近做的一个移动终端的项目,遇到一个默认设置更改的问题。起初非常怀疑是自己的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~ 然,这件事情最有价值啊!
Sets whether a web application runs in full-screen mode.
Syntax
Discussion
If
set to
behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the
Boolean JavaScript property.
Availability
Available in iPhone OS 2.1 and later.
Support Level
Apple extension.
Sets the style of the status bar for a web application.
Syntax
Discussion
This meta tag has no effect unless you first specify full-screen mode as described in “url.”
If
set to
the status bar has a black background. If set to
the status bar is black and translucent. If set to
the web content is displayed below the status bar. If set to
the web content is displayed on the entire screen, partially obscured by the status bar. The default value is
Availability
Available in iPhone OS 2.1 and later.
Support Level
Apple extension.
Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iPhone.
Syntax
Discussion
By default, Safari on iPhone detects any string formatted like a phone number and makes it a link that calls the number. Specifying
this feature.
Availability
Available in iPhone OS 1.0 and later.
Support Level
Apple extension.
Changes the logical window size used when displaying a page on iPhone.
Syntax
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
of
the width, and
of
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
Safari assumes the width is
portrait and
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:
To set the initial scale to
add this to your HTML file:
To set the initial scale and to turn off user scaling, add this to your HTML file:
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.
移动终端浏览器默认设置视口的宽度和初始规模。
最近做的一个移动终端的项目,遇到一个默认设置更改的问题。起初非常怀疑是自己的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"> |
If
contentis
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.standaloneread-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"> |
This meta tag has no effect unless you first specify full-screen mode as described in “url.”
If
contentis
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
defaultor
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"> |
By default, Safari on iPhone detects any string formatted like a phone number and makes it a link that calls the number. Specifying
telephone=nodisables
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"> |
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-widthinstead
of
320for
the width, and
device-heightinstead
of
480for
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-widthin
portrait and
device-heightin
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"> |
1.0,
add this to your HTML file:
<meta name = "viewport" content = "initial-scale = 1.0"> |
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no"> |
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.
相关文章推荐
- 移动终端浏览器初始设置apple-mobile-web-app-capable(转)
- 移动终端浏览器初始设置apple-mobile-web-app-capable (转)
- 移动终端浏览器初始设置apple-mobile-web-app-capable (转)
- [转载]移动终端浏览器初始设置apple-mobile-web-app-capable
- apple-mobile-web-app-capable
- meta name="apple-mobile-web-app-capable"
- Meta标签中的apple-mobile-web-app-capable属性及含义
- Meta标签中的apple-mobile-web-app-capable属性及含义
- webapp之路--meta标签format-detection、apple-mobile-web-app-capable
- apple-mobile-web-app-capable
- Meta标签中的apple-mobile-web-app-capable属性及含义
- Meta标签中的apple-mobile-web-app-capable属性及含义
- 移动开发webapp开发常用meta设置手机浏览器全屏模式,webappmeta
- 移动开发webapp开发常用meta设置手机浏览器全屏模式,webappmeta
- apple-mobile-web-app-status-bar-style
- Meta标签中的apple-mobile-web-app-status-bar-style属性及含义
- html移动Web开发----优化浏览器视口宽度设置
- 构建高效的移动终端 Web应用程序(Building High Performance Mobile Web Applications)
- Meta 标签 apple-mobile-web-app-
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />