本文来自互联网
自 iPhone 和 Android 这两个牛逼的手机操作系统发布以来, 在互联网界从此就多了一个新的名词 - web App(意为基于 Web 形式的应用程序). 业界关于 Web App 与 Native App 的争论已有一段时间, 而 Hybrid 混合 App 则受到推荐, 随着时间的推移, 我们相信 Web App 也会有一定的市场, 那么它到底有什么奥秘呢? 让我们来看看.
Web App 与 Native App 有何区别呢?
NativeApp
开发成本非常大. 一般使用的开发语言为 JAVA,C++,Objective-C.
更新体验较差, 同时也比较麻烦. 每一次发布新的版本, 都需要做版本打包, 且需要用户手动更新(有些应用程序即使不需要用户手动更新, 但是也需要有一个恶心的提示).
非常酷. 因为 Native App 可以调用 iOS 中的 UI 控件以 UI 方法, 它可以实现 Web App 无法实现的一些非常酷的交互效果.
Native App 是被 Apple 认可的. Native App 可以被 Apple 认可为一款可信任的独立软件, 可以放在 Apple Stroe 出售, 但是 Web App 却不行.
Web App
开发成本较低. 使用 Web 开发技术就可以轻松的完成 Web App 的开发.
升级较简单. 升级不需要通知用户, 在服务端更新文件即可, 用户完全没有感觉.
维护比较轻松. 和一般的 Web 一样, 维护比较简单, 它其实就是一个站点.
Web App 说白了就是一个针对 iPhone,Android 优化后的 Web 站点, 它使用的技术无非就是 html 或 HTML5,CSS3,JavaScript, 服务端技术 JAVA,PHP,ASP.
当然, 因为这些高端智能手机 (iPhone,Android) 的内置浏览器都是基于 webkit 内核的, 所以在开发 Web App 时, 多数都是使用 HTML5 和 CSS3 技术做 UI 布局. 当使用 HTML5 和 CSS3l 做 UI 时, 若还是遵循着一般 Web 开发中使用 HTML4 和 CSS2 那样的开发方式的话, 这也就失去了 Web App 的本质意义了, 且有些效果也无法实现的, 所以在此又回到了我们的主题 - Web App 的布局方式和技术.
在此所说的移动平台前端开发是指针对高端智能手机 (如 iPhone,Android) 做站点适配也就是 Web App, 并非是针对普通手机开发 Wap 2.0, 所以在阅读本篇文章以前, 你需要对 webkit 内核的浏览器有一定的了解, 你需要对 HTML5 和 CSS3 有一定的了解. 如果你已经对此有所了解, 那现在就开始往下阅读吧...
Web App 开发技巧
1,webkit 内核中的一些私有的 meta 标签
- // 强制让文档的宽度与设备的宽度保持 1:1, 并且文档最大的宽度比例是 1.0, 且不允许用户点击屏幕放大浏览
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
- //iPhone 设备中的 Safari 私有 meta 标签, 它表示: 允许全屏模式浏览
- <meta content="yes" name="apple-mobile-web-app-capable" />
- //iPhone 的私有标签, 它指定的 iPhone 中 Safari 顶端的状态条的样式
- <meta content="black" name="apple-mobile-web-app-status-bar-style" />
- // 告诉设备忽略将页面中的数字识别为电话号码
- <meta content="telephone=no" name="format-detection" />
2,HTML5 标签的使用
在开始编写 Web App 时, 哥建议前端工程师使用 HTML5, 而放弃 HTML4, 因为 HTML5 可以实现一些 HTML4 中无法实现的丰富的 Web 应用程序的体验, 可以减少开发者很多的工作量, 当然了你决定使用 HTML5 前, 一定要对此非常熟悉, 要知道 HTML5 的新标签的作用. 比如定义一块内容或文章区域可使用 section 标签, 定义导航条或选项卡可以直接使用 nav 标签等等.
3, 利用 CSS3 边框背景属性
这个按钮有圆角效果, 有内发光效果还有高光效果, 这样的按钮使用 CSS3 写是无法写出来的, 当然圆角可以使用 CSS3 来写, 但高光和内发光却无法使用 CSS3 编写, 这个时候你不妨使用 - webkit-border-image 来定义这个按钮的样式.
4, 块级化 a 标签
请保证将每条数据都放在一个 a 标签中, 为何这样做? 因为在触控手机上, 为提升用户体验, 尽可能的保证用户的可点击区域较大.
5, 自适应布局模式
在编写 CSS 时, 我不建议前端工程师把容器 (不管是外层容器还是内层) 的宽度定死. 为达到适配各种手持设备, 我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式), 因为这样做可以让你的页面在 iPad,itouch,ipod,iPhone,Android, Web safarik, Chrome 都能够正常的显示, 你无需再次考虑设备的分辨率.
6, 学会使用 - webkit-box
webkit 为 display 属性提供了一个 - webkit-box 的值, 它可以帮助前端工程师做到盒子模型灵活控制.
7, 如何去除 Android 平台中对邮箱地址的识别
来源: https://www.cnblogs.com/chenrf/p/10100293.html