移动终端浏览器初始设置apple-mobile-web-app-capable(转)
来源:互联网 发布:php curl 文件大小 编辑:程序博客网 时间:2024/04/29 02:27
移动终端浏览器默认设置视口的宽度和初始规模。
最近做的一个移动终端的项目,遇到一个默认设置更改的问题。起初非常怀疑是自己的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
isset to yes
,the web application runs in full-screen mode; otherwise, it doesnot. The default behavior is to use Safari to display webcontent.You can determine whether a webpage is displayed in full-screenmode using the
window.navigator.standalone
read-onlyBoolean 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-screenmode as described in
“url.” If
content
isset to default
,the status bar appears normal. If set toblack
,the status bar has a black background. If set toblack-translucent
,the status bar is black and translucent. If set todefault
or black
,the web content is displayed below the status bar. If settoblack-translucent
,the web content is displayed on the entire screen, partiallyobscured by the status bar. The default value isdefault
.
- Availability
Available in iPhone OS 2.1 and later.
- Support Level
Apple extension.
format-detection
Enables or disables automatic detection of possible phone numbersin 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 aphone number and makes it a link that calls the number.Specifying
telephone=no
disablesthis 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 oniPhone.
- 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 webcontent on iPhone. Typically, you use the viewport meta tag to setthe width and initial scale of the viewport.
For example, if your webpage is narrower than 980 pixels, then youshould set the width of the viewport to fit your web content. Ifyou are designing an iPhone-specific web application, you shouldset the width to the width of the device.
“email”
describes theproperties supported by the viewport meta key and their defaultvalues. When providing multiple properties for the viewport metakey, you should use a comma-delimited list of assignmentstatements. When referring to the dimensions of a device, you should use theconstants described in
“number” insteadof hard-coding specific numeric values. For example,use device-width
insteadof 320
forthe width, and device-height
insteadof 480
forthe height in portrait orientation. You do not need to set every viewport property. If only a subset ofthe properties are set, then Safari on iPhone infers the othervalues. For example, if you set the scale to
1.0
,Safari assumes the width isdevice-width
inportrait and device-height
inlandscape orientation. Therefore, if you want the width to be 980pixels and the initial scale to be 1.0, then set both of theseproperties. 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 toyour HTML file:
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
Use the Safari on iPhone console to help debug your webpages asdescribed in
“Debugging”. The console contains tips tohelp you choose viewport values—for example, it reminds you to usethe constants when referring to the device width andheight.
- 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
- meta name="apple-mobile-web-app-capable"
- Meta标签中的apple-mobile-web-app-capable属性及含义
- Meta标签中的apple-mobile-web-app-capable属性及含义
- Meta标签中的apple-mobile-web-app-capable属性及含义
- Meta 标签 apple-mobile-web-app-
- apple-mobile-web-app-status-bar-style
- 移动互联网的技术趋势:从APP到Mobile Web
- 针对移动终端的Web App前端开发
- Meta标签中的apple-mobile-web-app-status-bar-style属性及含义
- Meta标签中的apple-mobile-web-app-status-bar-style属性及含义
- Meta标签中的apple-mobile-web-app-status-bar-style属性及含义
- mobile web app 介绍
- Web移动终端开发
- 移动端初始css设置
- junit4 对springmvc 进行单元测试
- js中的函数定义
- C++之“编程简介”
- 深入理解PHP原理之Opcodes
- XCODE6修改工程名
- 移动终端浏览器初始设置apple-mobile-web-app-capable(转)
- Flash CS4运行时提示:Java运行时环境初始化时出现错误。您可能需要重新安装 Flash。解决方案
- error LNK2019: 无法解析的外部符号
- UIActivityViewController iOS8 iPad Crash处理
- SharePoint 2013 Nintex Workflow 工作流帮助(九)
- 排序算法(五):计数排序与非比较排序
- 用Maven构建Hadoop项目
- 软件开发文档总集
- ITextView如何关闭键盘