把你的网站改造成一个iOSWebApp

前言

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都主动防护网小微创业公司专业提供成都企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

iOS上的一个Web App（下图中的「念」）和Native App(原生应用)在外观上看起来基本上一样，但是其使用的技术是HTML，CSS，Javascript，而不是原生应用所使用的Objective-C。

本文简单介绍一下如何把一个Web站点改造成iOS上的Web App，这里假设你的网站是响应式设计（responsive design）或者已经做过移动端的适配。

viewport

我们在HTML中加上viewport(这里假设用户已经对viewport有所了解)　meta标签：

其中width=device-width指的是移动浏览器所显示的宽度等于设备的物理宽度，initial-scale=1.0指的是初始缩放倍数为1.0(即不缩放)，maximum-scale=1.0指的是***的缩放倍数是1.0，user-scalable=no指用户不可以手动进行缩放。这些参数请根据自己的情况进行调整。本站调整完成后，效果如下：

Icon

当用户通过safari访问我们网站的时候，用户是可以把网站的URL以一个快捷方式的形式添加到主屏幕的，展示形式跟原生的应用是一样，所以我们要给我们的网站添加应用Icon。

iOS所用的icon是png格式的，其提供了apple-touch-icon和apple-touch-icon-precomposed两种icon，使用方式如下：

以上你只能选其一，二者的区别在于如果使用apple-touch-icon，那么iOS会给icon加上一些NB的效果，包括圆角，阴影，反光。如果使用apple-touch-icon-precomposed则iOS不会加这个效果。

如果你的网站也要可以在Ipad上访问，那么你还要针对不同的设备准备不同尺寸的icon，你可以通过sizes属性来指定icon的尺寸：

如果你不指定size属性，那么默认为57x57，我们可以看到ipad所需icon的尺寸是72x72，retina屏幕的iphone所需的尺寸是114x114，retina屏幕的ipad所需的尺寸是144x144。

如果没有当前设备所需尺寸的icon，那么iOS将会选用icon中所有大于此设备所需尺寸的最小的一个。如果没有比设备所需尺寸大的icon，那么选用***的那个icon。如果有多个符合条件的icon，那么iOS会选择有precomposed关键词的那个。

如果在HTML中没有指定icon，那么iOS会到WEB根目录下寻找对应的icon。假设设备需要57x57的icon，那么iOS将以下面的顺序进行访问：

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

#p#

启动界面

像原生应用一样，你也可以给Web App加上一个启动界面，很简单：

在iPhone和iPod touch上，尺寸大小必须为320 x 460。

隐藏Safari用户栏

为了更加像原生应用，我们还可以对Safari的用户栏和地址栏进行隐藏，这个叫作standalone模式，加入以下meta进入此模式：

你可以通过window.navigator.standalone来检测当前是否是standalone模式。效果如下：

链接问题

在Safari中，如果点击一个链接，那么Safari将会打开一个新的tab，显然做为一个应用这体验简直太差了，需要在HTML中加入以下JavaScript来阻止此行为：

 
 
 
 
  
  
  
   
  
  
  
  // Mobile Safari in standalone mode 
  
  
  
  if(("standalone" in window.navigator) && window.navigator.standalone){ 
  
  
  
   
  
  
  
      // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true 
  
  
  
      var noddy, remotes = true; 
  
  
  
   
  
  
  
      document.addEventListener('click', function(event) { 
  
  
  
   
  
  
  
          noddy = event.target; 
  
  
  
   
  
  
  
          // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML 
  
  
  
          while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { 
  
  
  
              noddynoddy = noddy.parentNode; 
  
  
  
          } 
  
  
  
   
  
  
  
          if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) 
  
  
  
          { 
  
  
  
              event.preventDefault(); 
  
  
  
              document.location.href = noddy.href; 
  
  
  
          } 
  
  
  
   
  
  
  
      },false); 
  
  
  
  }

以上代码来自gist。

***

Have fun　：）

参考：

Configuring Web Applications

Everything you always wanted to know about touch icons

原文链接：http://weizhifeng.net/make-web-app-more-native.html

分享题目：把你的网站改造成一个iOSWebApp
分享URL：http://www.gawzjz.com/qtweb2/news14/21964.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容