移动平台前端开发之WebApp代码技巧

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

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<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在浏览器给网站进行身份表示，用法如下：

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

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

<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属性为“增加一层透明高光层的图标”

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

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

移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
＃笔记＃移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...
【开源专访】Sea.js创始人玉伯的前端开发之路
摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的 ...
前端开发之JavaScript篇
一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
前端开发之jQuery效果篇
主要内容: 1.显示与隐藏效果 2.滑动效果 3.淡入与淡出效果 4.动画效果 5.弹出广告效果一.显示与隐藏显示与隐藏即 show() 和 hide() ,能够控制元素显示或隐藏. 实例: &l ...
前端开发之JavaScript基础篇三
主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证一.创建对象的几种方式 1 ...
前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
前端开发之HTML篇一
主要内容: 一.HTML简介二.HTML标签三.HTML文档结构和注释四.head标签及相关内容五.body标签及相关内容 1️⃣ HTM ...

随机推荐

csu oj 1339: 最后一滴血
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1339 1339: 最后一滴血 Time Limit: 1 Sec Memory Limit: 1 ...
。。。无语的Eclipse+Tomact。。。
晕哦,今天又被Eclipse给骗了,今天部署了一个SSH的环境,搞了半天,JAR包是通过BuildPath导入进去的,怎么搞都报错,说是找不到Spring-Web的一个Jar包,差点没有把我给弄死.. ...
Java泛型01--任意数组中两元素交换
package com.zl.generic; /** * 交换“任意”数组中两个元素 */ public class GenericSwapArray { public static void m ...
java异常类
package shb.java.exception; /** * 测试异常类 * @Package:shb.java.exception * @Description: * @author shao ...
10---Net基础加强
复习: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...
RobotFramework 安装配置（一）
服务器接口的测试框架的选择,最后选中了 RobotFramework ,原因一:能有效的管理测试用例,,支持批量执行,能实现关键字驱动或者数据驱动.原因二:支持测试人员可以使用Python和java创 ...
zw版【转发·台湾nvp系列Delphi例程】HALCON FillUpShape1
zw版[转发·台湾nvp系列Delphi例程]HALCON FillUpShape1 procedure TForm1.Button1Click(Sender: TObject);var img : ...
[php]gd图像
<?php /* 处理图像 */ /* {php5} 动态图像的处理更容易. 在 php.ini中就包含了GD扩展包, 去掉其中的注释即可. extension=php_gd2.dll 其中 ...
Sqlserver 平面文件导入/ SSIS FlatFileSource导入文件时出现LocaleID is not installed报错问题
最近在使用SqlServer和SSIS导入一个CSV文件到数据库时(SSIS选用的FlatFileSource作为数据流源),老是遇到 The LocaleID 4 is not installed ...
LAMP php5.4编译
编译时出现下列问题时: In file included from /usr/local/src/php-5.4.6/ext/gd/gd.c:103: /usr/local/src/php-5.4.6 ...

移动平台前端开发之WebApp代码技巧

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

随机推荐

热门专题