移动开发之meta篇
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale: 初始的缩放比例 (范围从>0到 10 )
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放
- <meta name="apple-mobile-web-app-capable" content="yes" />
是否删除默认的苹果工具栏和菜单栏
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
当设置了app形式之后,作用是控制状态栏显示样式,但是本机ios7测试之后没啥改变……不解
- <meta name="format-detection"content="telephone=no, email=no" />
iphone会把一串数字识别为电话号码,点击的时候会提示是否呼叫,屏蔽这功能则把telephone设置为no,
要启用电话功能,请使用<a href="tel:13888888888">Call Me : 13888888888</a>来代替,
邮件则为<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
此外,apple还有两个有趣的标签:
1. apple-touch-icon
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
如果apple-mobile-web-app-capable
设置为yes
了,那么在苹果机的safari上可以通过添加到主屏按钮将网站添加到主屏幕上。而设置相应apple-touch-icon
标签,则添加到主屏上的图标就会使用我们指定的图片。
2. apple-touch-startup-image
<link rel="apple-touch-startup-image" href="/startup.png">
基于apple-mobile-web-app-capable
设置为yes
,可以为WebApp设置一个类似NativeApp的启动画面。和apple-touch-icon
不同,apple-mobile-web-app-capable
不支持sizes属性,要使用media来加载不同的启动画面。详细查询大漠的文章。
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> // iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
移动端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
this is body
</body>
</html>
移动开发之meta篇的更多相关文章
- Mobile开发之meta篇
Mobile开发之meta篇 <meta name="viewport" content="width=device-width, initial-scale=1, ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- 前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...
- 前端开发之JavaScript篇
一.JavaScript介绍 前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
- HTML5开发之meta标签的viewport使用说明
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而每一款手机有不同的分辨率,不同屏幕大 ...
- AndroidWear开发之HelloWorld篇
通过前一篇的学习,我们把环境都搭建好了,这下我们就可以正真的开发了. 一.创建Wear项目 通过项目创建向导一步一步下去就可以创建好一个Wear项目: 1.新建项目,一次填入应用名字,应用包名,项目位 ...
- 前端开发之jQuery篇--选择器
主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...
- 前端开发之CSS篇四
一.相对定位 二.绝对定位 三.固定定位 四.z-index 前言 定位有三种:1.相对定位 2.绝对定位 3.固定定位 这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
- 前端开发之CSS篇三
主要内容: 一.CSS布局之浮动 二.清除浮动带来的问题 三.margin塌陷问题和水平居中 四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
随机推荐
- ie8中使用placeholder
placeholder 是 html5 中的新属性,考虑到还有不少 ie8 的用户,所以找了一个 ie8 的 placeholder 的补丁,如下: <script type="tex ...
- 浅析 GRUB 如何加载 linux kernel
前言 对于 GRUB 的加载流程,网上绝大部分都是写对 menu.lst, grub.cfg 这些 GRUB 配置文件的编写流程,就像是写脚本语言一样,用些关键字就能让 PC机能正确启动桌面 Linu ...
- Linux ThunderBird Exchange 过期
在Linux上只用Web版处理邮件,就是因为找不到太好的能支持Exchange的邮件客户端.在网上无意中发现了ExQuilla这个Thunderbird的插件,试用了一下还是不错的,很方便,不过只能免 ...
- 【Qt】Qt Assistant介绍【转】
简介 Qt Assistant也就是我们常说的Qt助手,是一款用于呈现在线文档的工具. 简介 一分钟学会使用 Qt参考文档 Qt Assistant详解 命令行选项 工具窗口 文档窗口 工具栏 菜单 ...
- AngularJS(15)-依赖注入
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- php生成txt文件换行问题
用双引号即"\r\n"换行,不能用单引号即'\r\n'.
- VB最新使用教程
Visual Basic是一种由 微软公司开发的结构化的.模块化的.面向对象的.包含协助开发环境的事件驱动为机制的可视化程序设计语言.这是一种可用于微软自家产品开发的语言.它源自于BASIC编程语言. ...
- Spark 大数据平台 Introduction part 2 coding
Basic Functions sc.parallelize(List(1,2,3,4,5,6)).map(_ * 2).filter(_ > 5).collect() *** res: Arr ...
- Android--消除“Permission is only granted to system apps”错误
原文:http://blog.csdn.net/gaojinshan/article/details/14230673 在AndroidManifest.xml中使用了如下的配置: <uses- ...
- Mysql ubuntu下的安装卸载
删除 mysql sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get remove mysql-serversudo apt-ge ...