简易APP制作课堂 | 为什么说Web APP人人能做?
WebApp
Firdaus
19人收藏 5437次学习

简易APP制作课堂 | 为什么说Web APP人人能做?

自己做专业APP?!没钱没人没动力,耗时耗财耗心力。

小本经营,好不容易搭建起个网站,移动互联网大潮又来了。今天,Taylor Fausak在1KE手把手教你创建自己的Web APP。

几个月前,苹果同时发布了新手机和IOS 8操作系统,然而他们并没有更新他们的“Web APP 文档”。

我曾经在IOS 7、IOS 6、IOS 5时代分别写过相应的教程,指导用户自主创建Web APP。现在到了IOS 8时代,这篇文章就是教你如何创建一个IOS 8版本的Web APP。为了避免你在下面四个指导步骤之间搞不清楚绕来绕去,我把特意把一切细节都写出来了。

一、 构建(Configuration)

苹果移动Web APP程序资格(capable)

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

    这一标签使得页面全屏运行。注:这一命令只有在其被添加到主屏幕时才工作。

苹果移动Web APP程序标题(title)

<meta name="apple-mobile-web-app-title"
      content="iOS Web App">

这个标签设置了一个自定义标题。如果它丢失,iOS的将使用<title>标签, 如果<title>标签也丢失,它会默认使用“收藏夹”作为标题。标题被限定为8至12个字符。

苹果移动Web APP程序条形样式(bar-style)

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

这个标签更改了状态栏的颜色,有三种可供选择的颜色:默认值色、黑色、半透明黑色,若想获得最大的兼容性,最好的选择是黑色。默认值色和半透明黑色在iOS 6和iOS 7上的表现各不相同。(有的时候,iOS 7以上版本中,状态栏一开始的状态是纯白色或纯黑色,此时需要重新启用Web APP 以解决这一问题。)

视窗(viewport)

<meta name="viewport"
      content="initial-scale=1">

这个标签设置浏览器的视窗的大小。这意味着它决定了虚拟视窗的宽度值。通过将初始尺度设为1,虚拟视窗将与物理设备大小相当。这是你在这一步需要做的唯一设置。其他多余的设置,如设备宽,只能带来不必要的麻烦。(特别是,设备宽度(device-width)如果设置为 320的话,将导致IOS 7以上版本的设备显示出现宽银幕的效果。)

<!-- Only for web apps pretending to be native. -->
<meta name="viewport"
      content="initial-scale=1,minimum-scale=1,maximum-scale=1">

如果你想让你的Web APP 乍一看起来像个原生APP,你需要设置最小尺度为1(minimum-scale=1)和最大尺度为1(maximum-scale=1)。注:这意味着用户根本不能放大或缩小你的Web APP。

版式检测(format-detection)

<meta name="format-detection"
      content="telephone=no">

这个标签防止了Safari自动链接电话号码。

 

二、图标(Icons)

<!-- iPad retina icon -->
<link href="apple-touch-icon-precomposed-152.png"
      sizes="152x152"
      rel="apple-touch-icon-precomposed">
<!-- iPad retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-144.png"
      sizes="144x144"
      rel="apple-touch-icon-precomposed">
<!-- iPad non-retina icon -->
<link href="apple-touch-icon-precomposed-76.png"
      sizes="76x76"
      rel="apple-touch-icon-precomposed">
<!-- iPad non-retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-72.png"
      sizes="72x72"
      rel="apple-touch-icon-precomposed">
<!-- iPhone 6 Plus icon -->
<link href="apple-touch-icon-precomposed-180.png"
      sizes="120x120"
      rel="apple-touch-icon-precomposed">
<!-- iPhone retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-114.png"
      sizes="114x114"
      rel="apple-touch-icon-precomposed">
<!-- iPhone non-retina icon (iOS < 7) -->
<link href="apple-touch-icon-precomposed-57.png"
      sizes="57x57"
      rel="apple-touch-icon-precomposed">

你需要准备七种尺寸的图标:

  • 152x152 (76@2x) for iPad retina on iOS 7+
  • 144x144 (72@2x) for iPad retina on iOS 6
  • 76x76 for iPad on iOS 7+
  • 72x72 for iPad on iOS 6
  • 180x180 (60@3x) for iPhone 6 Plus
  • 144x144 (57@2x) for iPhone retina on iOS 6
  • 57x57 for iPhone on iOS 6

有两种尺寸的图标,你可能觉得你会用到,但实际情况并非如此。

  • 120x120 (60@x) for iPhone retina on iOS 7+: There’s no way to tell this apart from the 60@3x icon for the iPhone 6 Plus.
  • 60x60 for iPhone on iOS 7+: There are no devices that support this combination.

如果你为苹果触摸图标(apple-touch-icon)而不是预先合成的苹果触摸图标(apple-touch-icon-precomposed)设置一个相对值,在IOS 6中将显示出为有光泽的平滑图标,为了使图标与IOS 7及以上版本具有一致性,请使用预先合成的苹果触摸图标。默认情况下,图标会是一个页面屏幕截图。如果没有图标标签,Safari会尝试以下网址:

  1. /apple-touch-icon-180x180-precomposed.png
  2. /apple-touch-icon-180x180.png
  3. /apple-touch-icon-precomposed.png
  4. /apple-touch-icon.png

具体图标的尺寸将取决于当前设备。

 

三、启动图像(Startup images)

<!-- iPad retina portrait startup image -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 2)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">
<!-- iPad retina landscape startup image -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 2)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">
<!-- iPad non-retina portrait startup image -->
<link href="apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 1)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">
<!-- iPad non-retina landscape startup image -->
<link href="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
             and (-webkit-device-pixel-ratio: 1)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">
<!-- iPhone 6 Plus portrait startup image -->
<link href="apple-touch-startup-image-1242x2148.png"
      media="(device-width: 414px) and (device-height: 736px)
             and (-webkit-device-pixel-ratio: 3)
             and (orientation: portrait)"
      rel="apple-touch-startup-image">
<!-- iPhone 6 Plus landscape startup image -->
<link href="apple-touch-startup-image-1182x2208.png"
      media="(device-width: 414px) and (device-height: 736px)
             and (-webkit-device-pixel-ratio: 3)
             and (orientation: landscape)"
      rel="apple-touch-startup-image">
<!-- iPhone 6 startup image -->
<link href="apple-touch-startup-image-750x1294.png"
      media="(device-width: 375px) and (device-height: 667px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 startup image -->
<link href="apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone < 5 retina startup image -->
<link href="apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone < 5 non-retina startup image -->
<link href="apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
             and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

这时你需要十个启动图像尺寸。

  • 1536x2008 (768x1004@2x) for iPad retina portrait
  • 1496x2048 (748x1024@2x) for iPad retina landscape
  • 768x1004 for iPad portrait
  • 748x1024 for iPad landscape
  • 1242x2148 (414x716@3x) for iPhone 6 Plus portrait
  • 1182x2208 (394x736@3x) for iPhone 6 Plus landscape
  • 750x1294 (375x647@2x) for iPhone 6
  • 640x1096 (320x548@2x) for iPhone 5
  • 640x920 (320x460@2x) for iPhone retina
  • 320x460 for iPhone

注:你只需为iPads和iPhone 6 Plus准备肖像和风景图。其他型号的iPhones只能在肖像图中启动Web Apps。  

为了使一切运转正常,你必须确保你的Web App是具备苹果移动Web APP程序资格(apple-mobile-web-app-capable)的。因为它们只能在你从主屏幕启动时出现。

与前面讲到的图标不同,启动图像并没有默认值。如果你没有设定数值,启动屏幕将会是纯白色的。Safari不会自动尝试任何事情,这就需要你手动添加的元标签(meta tags)。

风景图实际上并不是一张完整的风景,它们应该是高长宽短的竖形图片。如果是宽幅的风景图,应该将其顺时针旋转90度。

在IOS 7 及以上版本中,当应用程序启动时,实际上启动图像是被拉伸的。在iOS 7系统中,一旦应用程序成功启动,启动图像就会消失于弹出的状态栏之下。

因此,启动图像的分辨率必须是上述列表中的其中一个,这样Safari浏览器在启动时才能不执行任何缩放。

四、Hacks

<style>
  html {
    -webkit-text-size-adjust: 100%;
  }
</style>

这种风格可以在启动风景图顺时针旋转时有效防止字体变大。

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
标签:
WebApp