当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

移动web H5开发技巧分享:设置iphone和ipad的启动画面

看到这样的标题,如果不明白,25学堂的小编给大家翻译下,就是在iOS中为 移动网站添加图标到主屏幕以及增加启动画面。

比如我们做了一个H5项目,想要用户向原生APP一样,制作web h5的启动图标。让用户在iphone手机桌面可以直接点击我们的图标启动web h5或者在ipad上启动,而且设置下我们的启动图片等过程。

 

具体实现的方法是通过利用iOS中Safari浏览器的特性来实现的。满足一下我们伪Web App的虚荣心。O(∩_∩)O哈哈哈~

具体实现步骤:

第一步:用苹果自带的 浏览器Safari 打开 25学堂官网:http://www.25xt.com/

第二步:点击浏览器下面的中间的分享图标。出现下图,点击   添加到主屏幕

%e8%ae%be%e7%bd%aeiphone%e5%92%8cipad%e7%9a%84%e5%90%af%e5%8a%a8%e7%94%bb%e9%9d%a2-%e6%b7%bb%e5%8a%a0%e5%88%b0%e4%b8%bb%e5%b1%8f%e5%b9%95

 

第三步:设置web APP的名称即可,点击完成。

有兴趣的小伙伴可以试试25学堂的APP。

 

 

下面详细解读一下如何来设置iphone和ipad的启动画面

 

第一部分,我们先回顾一下iphone 手机 各种机型的尺寸和规范:

下面是web h5浏览器渲染的一些参数。跟我们app设计的尺寸关系不大。希望大家别搞混了。

iphone-%e6%89%8b%e6%9c%ba-%e5%90%84%e7%a7%8d%e6%9c%ba%e5%9e%8b%e7%9a%84%e5%b0%ba%e5%af%b8%e5%92%8c%e8%a7%84%e8%8c%83

 

在我们的web h5项目当中的设置启动图标和启动图片的参数是:

apple-touch-startup-image

 

1、添加图标到主屏幕是Web App的第一步:

添加图标到屏幕里的有两种属性值:

apple-touch-icon和apple-touch-icon-precomposed,

区别就在于是否会应用iOS中自动给图标添加的那层高光。这个高光在ios7系统之后就不存在啦。

所以,现在无论用哪个都是可以的。

代码如下:

<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”25xt.png”>

 

 

 

2、为APP 添加启动图片

<link rel="apple-touch-startup-image" href="images/ios_startup.png"> 
<link rel="apple-touch-startup-image" href="images/ios_startup@2x.png" sizes="640x920">
<link rel="apple-touch-startup-image" href="images/ios_startup-large@2x.png" sizes="640x1096">
<link rel="apple-touch-startup-image" href="images/ios_startup-6@2x.png" sizes="750x1294">
<link rel="apple-touch-startup-image" href="images/ios_startup-6-plus@3x.png" sizes="1242x2148">

 

完整的web H5项目的设置iphone的启动图标和启动图。

<link rel=”apple-touch-icon-precomposed” sizes=”144×144″ href=”25xt.png”>
<link rel=”apple-touch-startup-image” href=”qidong.png” sizes=”750×1294″>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<meta name=”format-detection” content=”telephone=no”>
<meta name=”viewport” content=”width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no”>

 

apple-touch-startup-image是用来标示启动画面的

apple-mobile-web-app-capable是用来定义应用全屏展示的;

在定义了apple-mobile-web-app-capable的前提下,设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效;

如果你不想要设置status-bar为黑色,详细阅读:

(A)name 属性的 apple-mobile-web-app-capable 值(网站开启对 web app 程序的支持)

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

说明:

  • 网站开启对 web app 程序的支持。
  • 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”,就是说该 meta 是专门定义 web 应用的。

2、name 属性的 apple-mobile-web-app-status-bar-style 值(改变顶部状态条的颜色)

1
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明:

  • 在 web app 应用下状态条(屏幕顶部条)的颜色;
  • 默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);

注意:若值为“black-translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px )。

format-detection的值用于启用或禁用自动检测在网页中可能出现的电话号码;

 

 

第二部分:设置ipad的启动画面

ipad制作web应用程序的启动画面时发现个问题,只能显示竖屏图,横屏图出不来,如下:

首先页面头部里要加入(这个是APP启动画面图片,如果不设置,启动画面就是白屏,图片像素就是手机全屏的像素)

1
2
<link rel="apple-touch-startup-image" media="screen and (orientation: portrait)" href="/apple_startup.png">
<link rel="apple-touch-startup-image" media="screen and (orientation: landscape)" href="/apple_startup1.png">

重点在下面:

两张图片必须符合宽高标准才能正常显示:

startup_portrait.png  768×1004

startup_landscape.png 748×1024

1、要注意横屏用图必须竖过来,也就是宽748高1024才能显示

2、今天又发现,在safari里选“添加到主屏幕”时要保证设备是竖放,才能在完成后成功显示启动画面。



无觅相关文章插件,快速提升流量

本文标题:移动web H5开发技巧分享:设置iphone和ipad的启动画面

本文地址:http://www.25xt.com/allcode/14176.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。