1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

  1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  2. <meta content="yes" name="apple-mobile-web-app-capable" />
  3. <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  4. <meta content="telephone=no" name="format-detection" />

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

2、关于Apple设备私有的apple-touch-icon和apple-touch-icon-precomposed的区别详解：

以前我们用过favicon在浏览器给网站进行身份表示，用法如下：

  1. <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
  2. <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />

现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。

  1. <link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。

57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

在iPhone/iPad等苹果移动设备上，可以把网站”添加至主屏幕”，添加时的图标可以在HTML中自定义设置图片。

可以使用apple-touch-icon和apple-touch-icon-precomposed这两种方法，两者区别是：

使用apple-touch-icon属性为“增加一层透明高光层的图标”

<link rel=”apple-touch-icon” href=”icon.png” />
使用apple-touch-icon-precomposed属性为“设计原图图标”

<link rel=”apple-touch-icon-precomposed” href=”icon.png” />

文章摘自http://blog.sina.com.cn/s/blog_655388ed01016vpi.html

移动平台前端开发之WebApp代码技巧的更多相关文章

  1. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  2. ＃笔记＃ 移动前端开发之viewport

    一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport  ...

  3. Sea.js创始人玉伯的前端开发之路

    在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...

  4. 【开源专访】Sea.js创始人玉伯的前端开发之路

    摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...

  5. 前端开发之JavaScript篇

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

  6. 前端开发之jQuery效果篇

    主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果 一.显示与隐藏 显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...

  7. 前端开发之JavaScript基础篇三

    主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证 一.创建对象的几种方式 1 ...

  8. 前端开发之JavaScript基础篇一

    主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换   ...

  9. 前端开发之HTML篇一

    主要内容:     一.HTML简介 二.HTML标签        三.HTML文档结构和注释        四.head标签及相关内容        五.body标签及相关内容 1️⃣   HTM ...

随机推荐

  1. G面经prepare: Android Phone Unlock Pattern

    1 2 3 4 5 6 7 8 9 只有中间没有其他键的两个键才能相连,比如1可以连 2 4 5 6 8 但不能连 3 7 9 但是如果中间键被使用了,那就可以连,比如5已经被使用了,那1就可以连9 ...

  2. 转：Curl详解

    用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件.其实curl远不止前面所说的那些功能,大家可以通过man curl阅读手册页获取更多的信息.类 ...

  3. SQL封装、多态与重载

    面向对象1.类:众多对象抽象出来的2.对象:类实例化出来的 3.类的定义关键字 class 4.类里面包含成员变量成员属性 成员方法 5.面向对象三大特性(1)封装目的:保护类,让类更加安全.做法:让 ...

  4. Servlet里写验证码

    public class CodeServlet extends HttpServlet { /** * The doGet method of the servlet. <br> * * ...

  5. Vim篇

    Vim编辑器中的一些常用命令: 1:shift+* , 选取光标所在处的整个字符,并查找.(十分方便),快捷键gd 2:set nu , 显示各行行号,使得基于行的命令更方便. 3:shift+% , ...

  6. 超链接点击后不显示hover

    超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了 解决方法:改变CSS属性的排列顺序 L-V-H-A a:link {} a:visite ...

  7. windows下nginx和php环境的配置

    至于php的配置,与之前博文中使用apache服务器时一样. 对于nginx的配置,来看看如何修改配置文件: #user nobody; worker_processes ; #error_log l ...

  8. 【pyQuery分析实例】分析体育网冠军联盟比赛成绩

    目标地址:http://www.espncricinfo.com/champions-league-twenty20-2012/engine/match/574265.html liz@nb-liz: ...

  9. linux下在eclipse上运行hadoop自带例子wordcount

    启动eclipse:打开windows->open perspective->other->map/reduce 可以看到map/reduce开发视图.设置Hadoop locati ...

  10. 利用 iptables 命令限制单个端口的并发连接数

    iptables -I INPUT -p tcp --dport 11251:11300 -m connlimit --connlimit-above 10 -j REJECT 以上代码意思: 在IN ...