近期把做好的ipad HTML5混合应用适配到android上，发现android的webview比 iPad差太多了，android4.4因为升级到chromium。和chrome内核一致，全部问题不多，但android4.3下面的版本号兼容问题太多了，仅仅能一个一个慢慢攻克了！

眼下已经碰到了css3 flex box布局的兼容问题， js的兼容问题等。

  • Android的 css3 flex box须要这样写

.frame-page {

    display: -moz-box; /* Firefox */

    display: -ms-flexbox; /* IE10 */

    display: -webkit-box; /* Safari */

    display: -webkit-flex; /* Chrome, WebKit */

    display: box;

    display: flexbox;

    display: flex;

    width: 100%;

    height: 100%;

  flex-flow: row;

  background-color: #136185; }

  • 屏幕密度的问题

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi,width=device-width">

以下部分资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个非常简明的demo 能够作为入门基础

学习的过程中做了点笔记 整理例如以下 尽管内容比較简单 可是数量还是比較多的 所以分了3篇

（上）包含Android设备多分辨率的问题。Android中构建HTML5应用程序基础

（中）包含Android与JS之间的互动。Android处理JS的警告对话框等。Android中的调试

（下）包含本地储存在Android中的应用。地理位置的应用，离线应用的构建

—————————————————————————————— 切割线 ————————————————————————————————————————

进入正题

● Android设备多分辨率的问题

Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示

Android浏览器和WebView默觉得mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍

三种解决方案：1 viewport属性 2 CSS控制 3 JS控制

1 viewport属性放在HTML的<meta>中

  1. <span style="font-size: x-small;">  <head>
  2. <title>Exmaple</title>
  3. <meta name=”viewport” content=”width=device-width,user-scalable=no”/>
  4. </head></span>

meta中viewport的属性例如以下

  1. <span style="font-size: x-small;">  <meta name="viewport"
  2. content="
  3. height = [pixel_value | device-height] ,
  4. width = [pixel_value | device-width ] ,
  5. initial-scale = float_value ,
  6. minimum-scale = float_value ,
  7. maximum-scale = float_value ,
  8. user-scalable = [yes | no] ,
  9. target-densitydpi = [dpi_value | device-dpi |
  10. high-dpi | medium-dpi | low-dpi]
  11. "
  12. /></span>

2 CSS控制设备密度

为每种密度创建独立的样式表（注意当中的webkit-device-pixel-ratio 3个数值相应3种分辨率）

  1. <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
  2. <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
  3. <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

在一个样式表中，指定不同的样式

  1. #header {
  2. <span style="white-space: pre;">       </span> background:url(medium-density-image.png);
  3. }
  4. @media screen and (-webkit-device-pixel-ratio: 1.5) {
  5. // CSS for high-density screens
  6. #header {
  7. background:url(high-density-image.png);
  8. }
  9. }
  10. @media screen and (-webkit-device-pixel-ratio: 0.75) {
  11. // CSS for low-density screens
  12. #header {
  13. background:url(low-density-image.png);
  14. }
  15. }
  1. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

3 JS控制

Android浏览器和WebView支持查询当前设别密度的DOM特性

window.devicePixelRatio 相同值有3个（0.75,1,1.5相应3种分辨率）

JS中查询设备密度的方法

  1. if (window.devicePixelRatio == 1.5) {
  2. alert("This is a high-density screen");
  3. } else if (window.devicePixelRation == 0.75) {
  4. alert("This is a low-density screen");
  5. }

● Android中构建HTML5应用

使用WebView控件 与其它控件的用法同样 在layout中使用一个<WebView>标签

WebView不包含导航栏。地址栏等完整浏览器功能，仅仅用于显示一个网页

在WebView中载入Web页面，使用loadUrl()

  1. WebView myWebView = (WebView) findViewById(R.id.webview);
  2. myWebView.loadUrl("http://www.example.com");

注意在manifest文件里增加訪问互联网的权限：

  1. <uses-permission android:name="android.permission.INTERNET" />

在Android中点击一个链接。默认是调用应用程序来启动。因此WebView须要代为处理这个动作 通过WebViewClient

  1. //设置WebViewClient
  2. webView.setWebViewClient(new WebViewClient(){
  3. public boolean shouldOverrideUrlLoading(WebView view, String url) {
  4. view.loadUrl(url);
  5. return true;
  6. }
  7. public void onPageFinished(WebView view, String url) {
  8. super.onPageFinished(view, url);
  9. }
  10. public void onPageStarted(WebView view, String url, Bitmap favicon) {
  11. super.onPageStarted(view, url, favicon);
  12. }
  13. });

这个WebViewClient对象是能够自己扩展的。比如

  1. private class MyWebViewClient extends WebViewClient {
  2. public boolean shouldOverrideUrlLoading(WebView view, String url) {
  3. if (Uri.parse(url).getHost().equals("www.example.com")) {
  4. return false;
  5. }
  6. Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
  7. startActivity(intent);
  8. return true;
  9. }
  10. }

之后：

  1. WebView myWebView = (WebView) findViewById(R.id.webview);
  2. myWebView.setWebViewClient(new MyWebViewClient());

另外出于用户习惯上的考虑 须要将WebView表现得更像一个浏览器。也就是须要能够回退历史记录

因此须要覆盖系统的回退键 goBack。goForward可向前向后浏览历史页面

  1. public boolean onKeyDown(int keyCode, KeyEvent event) {
  2. if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
  3. myWebView.goBack();
  4. return true;
  5. }
  6. return super.onKeyDown(keyCode, event);
  7. }

后面的内容在中篇中继续

Hybrid App适配Android注意点的更多相关文章

  1. 使用Cordova框架把Webapp封装成Hybrid App实践——Android篇

    公司没有IOS和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成.记录一下从中遇到的问题和需要用到的开发环境的配置 将Webapp ...

  2. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

  3. Android与H5互调（通过实例来了解Hybrid App）

    前些日子,Android原生开发将被取缔的吵得火热,JavaScript是能做一个完全的APP,但只使用JavaScript做出来的APP也不会牛逼到哪里去.最好的是混合(Hybrid)开发,在需要的 ...

  4. Hybrid App（二）Cordova+android入门

    上一篇介绍了app开发如何选型,由于公司人员组织结构的原因(app native较少,每个月一次迭代),因此选型hybrid app. 接下来说一下环境搭建: 一.Java环境 (1)安装jdk (2 ...

  5. Android hybrid App项目构建和部分基本开发问题

    1.首先是选型:Cordova+Ionic Framework,调试测试环境是Ripple Emulator.开发环境其实可以随便选,我个人选择了Eclipse,当然Android SDK+ADT也是 ...

  6. Android Hybrid App自动化测试实战讲解（基于python）

    1.Hybrid App自动化测试概要 什么是Hybrid App? Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App ...

  7. Android P的APP适配总结，让你快人一步

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 上篇:Android P 行为变更适配 Android P 这次有很多行为变更,其中不乏一些需要亟 ...

  8. 优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybrid App源码

    Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能. 另外IOS的Hybrid App也完成 ...

  9. Hybrid App技术批量制作APP应用与跨平台解决方案

    前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...

随机推荐

  1. 最短路 || POJ 1847 Tram

    POJ 1847 最短路 每个点都有初始指向,问从起点到终点最少要改变多少次点的指向 *初始指向的那条边长度为0,其他的长度为1,表示要改变一次指向,然后最短路 =========高亮!!!===== ...

  2. c:if标签--判断不为空和其他的值判断

      用<c:if test=""></c:if>标签时 <c:if test="${sl.chc_status==1 }"> ...

  3. 使用SimpleDateFormat 将毫秒转换成时分秒 格式:HH:mm:ss

    public static String dateFormatFromMilliSecond(long seconds) {        //初始化format格式    SimpleDateFor ...

  4. 关于U盘安装ubuntu-18.04安装时候出现的grub-efi-amd64-signed的问题。

    关于这个问题,首先我们要查看一下我们电脑的主板设置中U盘启动的类型是什么,是UEFI还是legacy? 对于如果是UEFI那么给ubuntu分区的时候不用设置/boot分区,设置efi系统分区:如果是 ...

  5. Release Python Program as exe

    py2exe 可以用来将python program 以exe的形式发布. 安装py2exe 对于python 3.x pip install py2exe 可以直接安装 对于python 2.7, ...

  6. Milk（sort+结构体）

    Description Ignatius drinks milk everyday, now he is in the supermarket and he wants to choose a bot ...

  7. 【HIHOCODER 1037】 数字三角形

    链接 问题描述 小Hi和小Ho在经历了螃蟹先生的任务之后被奖励了一次出国旅游的机会,于是他们来到了大洋彼岸的美国.美国人民的生活非常有意思,经常会有形形色色.奇奇怪怪的活动举办,这不,小Hi和小Ho刚 ...

  8. react 语法细节总结说明

    1.当要获取某个数据列表中的某个字段时,用“.”附加的形式.例如:获取user中的balance字段,用this.props.user.balance 来表示. 2.当要打印某个数据或字段结果时,co ...

  9. 80. Hibernate 5.0命名策略使用naming-strategy 不起作用【从零开始学Spring Boot】

    [原创文章,转载请注明出处] 事情的起因:一不小心从1.3.3升级到了1.4.0版本,结果就碰到了各种悲催的事情了,好吧,Hibernate5.0的新特性就是其中一个坑,我们会发现我们配置的namin ...

  10. HDU-2509-Be the Winner,博弈题~~水过~~

    Be the Winner Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ht ...