移动开发之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 五.文本属性和字体 ...
随机推荐
- AOJ 2200 Mr. Rito Post Office
Mr. Rito Post Office Time Limit : 8 sec, Memory Limit : 65536 KB Problem D: Mr. Rito Post Office あなた ...
- C#调用C、C++结构体数组的方法总结
一个客户要使用C#调用我们用C++开发的一个动态链接库,本来我没有C#的开发经验,就随便写了一个例程.以为很简单就可以搞定,没想到客户开发的过程中遇到了不少问题,最困难的就是用C#调用C++接口中的自 ...
- 有关Mysql连接问题
问题一——Mysql number Error 2003 MySQL连接错误.错误代码10061.10061一般是Mysql服务没启动.或Mysql服务器无法连接 . 在程序栏找到Mysql\Mysq ...
- 常用ASCII 码对照表
目前计算机中用得最广泛的字符集及其编码,是由美国国家标准局(ANSI)制定的ASCII码(American Standard Code for Information Interchange,美国标准 ...
- MySQL 5.7.9的多源复制
什么是多源复制? 首先,我们需要清楚 multi-master 与multi-source 复制不是一样的. Multi-Master 复制通常是环形复制,你可以在任意主机上将数据复制给其他主机. M ...
- Android中关于日期时间与时区的使用总结
在开发Android的过程中,出现过几次由于日期时间导致的问题,而且主要是由于时区的原因导致,所以一直想总结一下,形成一个良好的开发规范. 一.Unix时间戳 Unix时间戳(Unix tim ...
- Struts之ForwardAction
在Struts中,通过action跳转jsp,但是有时希望仅仅只是跳转页面,而不需要action,这时可以用ForwardAction. 定义一个仅仅是跳转的ForwardAction如下: < ...
- windows鼠标消息处理与键盘模拟函数
1.鼠标坐标问题 BOOL GetWindowRect( HWND hWnd, LPRECT lpRect ); RECT x;//定义一个二维数组x ::GetWindowRect(hwn ...
- fawef
欢迎使用马克飞象 @(示例笔记本)[马克飞象|帮助|Markdown] 马克飞象是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同 ...
- Week1 Team Homework #1: Study the projects done by previous student groups
我们研究了学长的项目:百度3D地图API的调用.下面是我们对该项目的一些看法: 优点: 界面清晰 各类之间调用及其他关系容易理清. 缺点: 前段html代码过于冗杂,很多(div)块间的层次关系不 ...