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. jvm内存设置

    JVM有很多个内存管理命令,总体而言,分为两类: 1.-X开头的管理命令:这些选项在JDK升级时不会通知修改: 2.-XX开头的管理命令:这些选项不够稳定,所以建议少用. JVM参数的含义: 参数名称 ...

  2. 解决Xamarin 生成时出现 “aapt.exe”已退出，代码为 1。错误问题

    项目中添加的资源或项目文件的名称不能包含 空格 横线 特殊符号 或者 Android关键字 等

  3. win8， VS2013 .NET 4.5在哪找svcutil.exe？

    我这个纠结呀,公司用win8, .NET 4.5.想做一个很简单的项目,就是wcf宿主iis,项目根目录下有aspx文件和svc文件.于是参考了一个博客http://www.cnblogs.com/y ...

  4. vi/vim 键盘图 & 替换

    在VIM中进行文本替换:    1.  替换当前行中的内容:    :s/from/to/    (s即substitude)        :s/from/to/     :  将当前行中的第一个f ...

  5. Spring day01

    1 实例化Spring容器 新建springday01项目1.F盘jar/Spring/first/五个jar包拷贝到lib下,复制xml文件到项目first包下2.First.java测试如何启动容 ...

  6. demo16Toast

    /Users/alamps/AndroidStudioProjects/demo16Toast/demo16Toast/src/main/res/layout/activity_main.xml &l ...

  7. [python] No module named _sysconfigdata_nd

    when setting python environment in Ubuntu13.04, i got this error: ImportError: No module named _sysc ...

  8. web标准

    仔细看看所有的前端招聘要求,几乎所有的都要求对web标准有深刻的理解. web标准,是一系列标准的集合.对前端来说,因为网页是由结构.表现和行为组成.对应的就有结构化标准语言,主要包括XHTML和XM ...

  9. Image对象及其子类BufferedImage

    (1)java.awt.Image图像类是抽象类,提供获得绘图对象.图像缩放.选择图像平滑度等功能,声明如下: public abstract class Image extends Object { ...

  10. Native OR WebApp ?

    前两天刚好和一帮产品同学聊过,特指一个APP里面的各页面应该怎么做,大家的总结如下,原理一样,关键是了解Native和Web各自的优劣势:1. 偏交互的Native,偏浏览的Web:交互指复杂操作,输 ...