Mobile开发之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>

  • 其他的meta设置
<!-- 启用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" />

　　所以，对于移动端，把通用的起始模板写成sublime的snippet：

<snippet>

    <content><![CDATA[

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

    <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" />

    <title>${1}</title>

</head>

<body>

    ${2}

</body>

</html>

]]></content>

    <tabTrigger>mhd</tabTrigger>

    <description>Mobile Frame</description>

    <scope>text.html</scope>

</snippet>

参考：

　　http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html

　　http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

　　http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html

Mobile开发之meta篇的更多相关文章

  1. 移动开发之meta篇

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  2. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  3. 前端开发之css篇

    一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...

  4. 前端开发之JavaScript篇

    一.JavaScript介绍  前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...

  5. HTML5开发之meta标签的viewport使用说明

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而每一款手机有不同的分辨率,不同屏幕大 ...

  6. AndroidWear开发之HelloWorld篇

    通过前一篇的学习,我们把环境都搭建好了,这下我们就可以正真的开发了. 一.创建Wear项目 通过项目创建向导一步一步下去就可以创建好一个Wear项目: 1.新建项目,一次填入应用名字,应用包名,项目位 ...

  7. 前端开发之jQuery篇--选择器

    主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...

  8. 前端开发之CSS篇四

    一.相对定位 二.绝对定位 三.固定定位 四.z-index 前言 定位有三种:1.相对定位 2.绝对定位 3.固定定位 这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣   相对定位 1.三 ...

  9. 前端开发之CSS篇三

    主要内容:  一.CSS布局之浮动     二.清除浮动带来的问题     三.margin塌陷问题和水平居中     四.善用父级的的padding取代子级的margin     五.文本属性和字体 ...

随机推荐

  1. leetcode排列，求第k个排列

    stl 中的下一个排列在写一遍忘了 写个1个多小时,使用递归写的,错误就在我使用一个list保存当前剩下的数,然后利用k/(n-1)!的阶乘就是删除的数字,但进过观察, 比如 list={1,2,3} ...

  2. C++之拷贝构造函数

    为什么要引入拷贝构造函数?(提出问题) 作用:创建一个对象的同时,使用一个已经存在的对象给另一个对象赋值 做比较:拷贝构造函数:对象被创建 +  用一个已经存在的对象 进行初始化 拷贝赋值函数:对象已 ...

  3. HDU 2089 不要62（挖个坑=-=）

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  4. Eclipse中svn图标不显示

    在菜单栏中:windows ->preferences->General->Appearance->Lable Decorations 勾选其中的 SVN 项,最后应用确认之后 ...

  5. php表单提交方法汇总

    问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中.解决办法有 ...

  6. wmic

    前沿:WMIC命令在我们的工作中可以帮助我们减少对其他工具的依赖并节省我们的时间,实在是一个值得学习和研究的好东西 命令很多,这里我把网上目前能找到的较实用的一些命令整理出来,希望各位看官能找到自己需 ...

  7. 003-python列表

    Python 列表(list) 列表是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 列表的基本操作: 索引 切片 追 ...

  8. 让python输出不自行换行的方法

    1,在输出内容后加逗号 例: for i in range(1,6):    j = 1    while(j <= 2*i - 1):        print "*",  ...

  9. Unity 读取、写入自定义路径文件，调用System.Windows.Forms

    调用System.Windows.Forms DLL 首先在Unity新建Plugins文件夹添加System.Windows.Forms.dll 然后代码中添加引用 using System; us ...

  10. Http(1)

    #http协议版本 http1.0:当前浏览器客户端与服务器端建立连接之后,只能发送一次请求,一次请求之后连接关闭. http1.1:当前浏览器客户端与服务器端建立连接之后,可以在一次连接中发送多次请 ...