移动开发webapp开发常用meta设置手机浏览器全屏模式,webappmeta
2015-11-09 09:55
573 查看
1、WebApp全屏模式:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
注意:viewport 后面加上 minimal-ui 在safri 体现效果
<meta name="apple-mobile-web-app-capable" content="yes" />
2、隐藏状态栏/设置状态栏颜色:
3、safri 添加到主屏界面的显示标题:
4、忽略自动识别数字为电话号码:
5、忽略自动识别邮箱账号:
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
[/code]
<!-- 是针对一些老的不识别viewport的浏览器,列如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
注意:viewport 后面加上 minimal-ui 在safri 体现效果
<meta name="apple-mobile-web-app-capable" content="yes" />
2、隐藏状态栏/设置状态栏颜色:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
3、safri 添加到主屏界面的显示标题:
<meta name="apple-mobile-web-app-title" content="应用标题">
4、忽略自动识别数字为电话号码:
<meta content="telephone=no" name="format-detection" />
5、忽略自动识别邮箱账号:
<meta content="email=no" name="format-detection" />
6、常用浏览器全屏设置:
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
[/code]
<!-- 是针对一些老的不识别viewport的浏览器,列如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
相关文章推荐
- myeclipse部署maven时,src/main/resources里面配置文件加载不到webapp下classes路径下的问题 分类: Maven Myeclipse 2014-07-11 1
- myeclipse部署maven时,src/main/resources里面配置文件加载不到webapp下classes路径下的问题
- spring WebApplicationInitializer
- 移动webAPP前端开发技巧汇总2
- 移动webAPP前端开发技巧汇总
- webapp通过JS代码与移动APP交互
- 使用spring容器时,服务器不能顺利启动信息: Initializing Spring root WebApplicationContext log4j:WARN No appenders cou
- WebApp之基础知识
- Spring中的WebAppRootListener
- hybridapp/webapp的前端UI框架推荐
- WebApp的前端所遇问题
- webapp,ios Safari打开新窗口
- 5大最流行手机webAPP框架之Ionic
- 基于CSS3的WEBAPP横向滑动模式演化
- webApplicationContext 与servletContext
- iphone上做webapp时总会识别一串数字为手机号码并变黑显示
- webapp
- FileSystemXmlApplicationContext、ClassPathXmlApplicationContext和XmlWebApplicationContext简介
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
- 好大夫在线:我们为什么要将重心转到Webapp?