HTTPZ.NET
分享有价值的建站资源!

5种办法让你的WebApp更像原生App

随着手机硬件的高速发展,WebApp的优势越来越明显,开发周期短,效率高,让越来越多的开发者采用WebApp开发,但是WebApp在体验上,还是不及原生App,下面就介绍5种办法,让你的WebApp更像原生的App。 一、控制用户缩放 网页可以无限缩放,但是原生App是不会缩放的。想让WebApp更像原生App,你要做的一件事就是控制用户的缩放,代码如下:

<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

viewport的宽度为屏幕宽度,initial-scale是初始缩放值,maximum-scale=1.0是能缩放的最大值。如果不想让用户缩放,则可以将最小值和最大值设为一样,都为1.0。 更多ViewPort设置详情可参看iOS Developer Library。 二、隐藏浏览器的UI或工具栏 首先设置为全屏模式:

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

隐藏地址栏:在App的顶部还有一个状态栏,你可以更进一步通过把状态栏设置成黑色来自定义app的外观,从而使你的app可以利用整个屏幕。

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

三、解决fixed bug,使用导航条或工具拦 大部分手机浏览器不支持css的,fixed属性,这样在做导航条或工具栏的时候非常麻烦,我们通常希望导航条固定在顶部。解决fixed bug 代码如下:

 $(window).scroll(function(){  
 // 重点就是下面这一条语句的实现   
   $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });      

 }); 

四、自定义iPad或iPhone图标 用户可以简单地把Web页面的链接添加至iOS设备的主屏幕上,作为一个Web开发者,你会希望控制Web site或者Web App的icon在用户设备上的展现方式。你可以通过跟多元标签来实现,苹果称之为“Web Clips”。如果你要搜索更多在用户屏幕自定义Web App icon内容的话,你可以搜“web clips”。 你需要的只是一个特别的icon,可以在head区添加如下代码实现:

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

同Native App一样,系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果,可用apple-touch-icon-precomposed代替apple-touch-icon。

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

系统默认的图标大小是57×57像素,不过一些设备有着不同的分辨率,你可以创建具有不同分辨率的icon:

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

最常用apple-touch-icon.png,但也可以包含尺寸大小信息以及是apple-touch-icon-precomposed还是apple-touch-icon(e.g. apple-touch-icon-57×57-precomposed.png)。 五、添加启动画面 IOS原生App是有启动画面的,而WebApp没有。因此,你需要在Web页面和WebApp上添加启动画面才能让它更像原生App,这个过程跟自定义icon差不多—需要通过 <link>添加适当标签。 与icon一样,不同规格尺寸的设备需要不同的启动画面,最常用最简单的方法使设置一个单独的图片:

<link rel="apple-touch-startup-image" href="/startup.png">

对iPhone和iPod touch而言, 图片是320×460像素,但是,如果你想使用分辨率更高的图片,下边方法可以实现:

<link rel="apple-touch-startup-image" href="/startup-748x1024.jpg"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="/startup-768x1004.jpg"
media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
赞(0)
没有账号? 忘记密码?

社交账号快速登录