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

时间 2019-11-26

标签移动平台前端开发 webapp 代码技巧栏目无线繁體版

原文原文链接

一、首先咱们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到很是重要的做用html

<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标签表示：告诉设备忽略将页面中的数字识别为电话号码web

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

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

<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>标签加入下面代码便可。webapp

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

apple-touch-icon 标签支持sizes属性，能够用来放置对应不一样的设备。iphone

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

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

能够使用apple-touch-icon和apple-touch-icon-precomposed这两种方法，二者区别是：scala

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

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