码迷,mamicode.com
首页 > 移动开发 > 详细

webapp开发要点记录

时间:2015-01-31 21:48:18      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

 

1. apple-touch-startup-image

将页面添加到桌面主屏幕后,如果有这个标签的话

<meta name="apple-mobile-web-app-capable" content="yes">

点击生成的图标就会进入app模式,这时,可以给其添加启动画面。

启动画面是一张图片,不同的机型,需要图片的大小不同,整理如下:

机型 分辨率 像素比 物理分辨率 图片分辨率  
iphone4/iphone4s 320 * 480 2 640 * 960 640 * 920  
iphone5/iphone5s 320 * 568 2 640 * 1136 640 * 1096  
iphone6 375 * 667 2 750 * 1334 750 * 1294  
iphone6+(portrait) 414 * 736 3 1242 * 2208 1242 * 2148  
iphone6+(landscape) 736 * 414 3 2208 * 1242 2208 * 1182  

 

 

 

 

 

 

图片的高度是物理像素高度减去顶部系统栏的 (20 * 像素比)px 

 

对应的meta标签为:

<!-- iphone4, iphone4s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>


<!-- iphone5, iphone5s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>


<!-- iphone6-->
<link rel="apple-touch-startup-image" href="/static/img/startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>


<!-- iphone6+ portrait-->
<link rel="apple-touch-startup-image" href="/static/img/startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"/>


<!-- iphone6+ landscape-->
<link rel="apple-touch-startup-image" href="/static/img/startup-2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"/>

 

  1) 可以支持哪些图片格式?

  2) <meta name="apple-mobile-web-app-capable" content="yes"> 是否必须有?

  

webapp开发要点记录

标签:

原文地址:http://www.cnblogs.com/zhaoran/p/4264744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!