安卓(android) html5开发与最佳实践（下）

最新推荐文章于 2022-03-04 00:19:59 发布

Mr883

最新推荐文章于 2022-03-04 00:19:59 发布

阅读量1.4k

点赞数

分类专栏： HTML5 文章标签： android app html5 用户体验 webapp

本文链接：https://blog.csdn.net/gb333_bean/article/details/43116135

版权

3 篇文章 0 订阅

订阅专栏

上篇说了一些HTML5开发内容，比如屏幕适配、webview的一些使用方法、webAPP的调试，现在继续...

其实webapp在Android4.4版本后有个很强大的调试功能，配合谷歌浏览器使用

我们自己代码里只要加上一句WebView.setWebContentsDebuggingEnabled(true);即可

然后在谷歌浏览器dev-tool下面可以看到自己的设备了，点击inspect就可以像浏览器调试网页那样调试自己设备上的html页面了

下面说说关于webapp的最佳实践

1.移动设备的请求应该重定向到专门网址的移动版本

不提倡使用响应式布局来统一pc端和移动端，而且响应式架构搭建和维护成本高

可以通过设置userAgent判断是否是移动端

2.使用适合移动设备的doctype

使用xhtml标记，不要使用frame或嵌套的table，指定相应的字符编码，比如常用的utf-8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

其实对于html5来说这个没必要写，也就是说

<!DOCTYPE html>这样就ok了

3.使用viewport meta标签来调整页面，比如可以指定为如下

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

4.避免过多的文件请求，而使网页尽量快速加载出来

比如图片、css、js这些文件，为保证渲染效果css文件一般放在<head>标签里

js可以放在body最后再去加载，图片后台可以做一些缩放压缩处理等

5.使用垂直的线性布局

宁可上下滚动也不要左右滚动，除非二次滚动无法避免

6.使用与像素无关的单位

比如指定文字大小为1.2em

7.使用导航栏增强用户体验，而不是整个页面只有你的内容，当然不要忘了标题

8.html页面不要写重定向标记，尽量交给后台处理

9.尽量减少链接，每个链接都是一个请求，可能拖慢加载速度

10.html标签使用要合理，符合语义化标签结构，比如导航栏可以使用<nav>标签而不是列表加<li>

11.不要用<table>标签布局

12.使用缓存，比如sessionStorage

13.避免自由文本的输入，使用预定义的文本供用户选择

14.表单元素提供label标签引用，input元素指定type和placeholder

关注