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. zoj The 12th Zhejiang Provincial Collegiate Programming Contest Team Formation

    http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5494 The 12th Zhejiang Provincial ...

  2. java.面向对象特征

    面向对象特征: 封装,多态,继承 面向对象思想: 封装,继承,多态,接口

  3. paper 62：高斯混合模型（GMM）参数优化及实现

    高斯混合模型(GMM)参数优化及实现 (< xmlnamespace prefix ="st1" ns ="urn:schemas-microsoft-com:of ...

  4. paper 29 ：CV会议+领先研究室+专家+代码网址

    做机器视觉和图像处理方面的研究工作,最重要的两个问题:其一是要把握住国际上最前沿的内容:其二是所作工作要具备很高的实用背景.解决第一个问题的办法就是找出这个方向公认最高成就的几个超级专家(看看他们都在 ...

  5. linux时钟同步

    方法1. ntpdate ip 搜索时钟服务器.找一个靠谱的时钟ip执行以上命令即可 可以把这个加入crontab中定时同步.# /usr/sbin/ntpdate 210.72.145.44 > ...

  6. Tomcat上的项目部署到WebLogic上の注意事项

    1.修改web.xml: <!-- <display-name>weboutweb</display-name> --> <!-- 注释掉 display-n ...

  7. PAT乙级 1013. 数素数 (20)

    1013. 数素数 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 令Pi表示第i个素数.现任给两个正整 ...

  8. RAID、软RAID和硬RAID

    RAID(redundant array of inexpensive disks):独立的硬盘冗余阵列,基本思想是把多个小硬盘组合在一起成为一个磁盘组,通过软件或硬件的管理达到性能提升或容量增大或增 ...

  9. Oracle的导入导出

    写批处理文件的基础知识 http://blog.chinaunix.net/uid-20672257-id-3056546.html http://wenku.baidu.com/view/db9c5 ...

  10. 函数后面加throw关键字

    [1]为什么函数后面加throw关键字? C++函数后面加关键字throw(something)限制,是对这个函数的异常安全性作出限制. 举例及解释如下: void fun() throw() 表示f ...