近期把做好的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. PHP08 数组和数据结构

    学习要点 数组的分类 数组的定义 数组的遍历 预定义数组 数组的相关处理函数 PHP操作数组需要注意的细节 数组的分类 关于PHP数组 由于PHP是弱类型的编程语言,所以PHP数组中的数组变量可以存储 ...

  2. java面试宝典第一弹

    object类的直接子类有哪些 Boolean Character Character.Subset Class ClassLoader Compiler Enum Math Number Packa ...

  3. 连接远程docker内的mysql（navicat）

    拉取mysql镜像 docker pull mysql:5.6 查看mysql镜像 docker images | grep mysql 启动mysql容器 docker run -p 3306:33 ...

  4. C++ 给自己的扫盲笔记

    1.运算符new分配内存的格式: 指针变量名 = new 类型: 如分配一个20字节的name变量    :name = new char[20]; 2.strlen(s);函数: 返回字符串s的长度 ...

  5. mysql多源复制安装

    多源复制的意思是多主一从. 多源复制的前提是必须要开启GTID模式. master1 :192.168.1.110 master2 :192.168.1.111 slave :192.168.1.15 ...

  6. 【eclipse】使用说明

    一. 设置jdk版本 1. Window->Preferences->Java->Installed JREs,选择jdk安装目录: 2. Window->Preference ...

  7. 大数据学习——下载集群根目录下的文件到E盘

    代码如下: package cn.itcast.hdfs; import java.io.IOException; import org.apache.hadoop.conf.Configuratio ...

  8. Python+selenium常用方法（Webdriver API）

    小编整理了目前学习的Python+selenium常用的一些方法函数,以后有新增再随时更新. 加载浏览器驱动: webdriver.Firefox() 打开页面:get() 关闭浏览器:quit() ...

  9. 【Ajax 3】JavaScript封装Ajax

    导读:上一篇博客简单介绍了一下对Ajax中的核心对象XMLHttpRequest的封装.那么为了方便对Ajax的应用,我们还需要进一步的对Ajax的基本功能进行下一步的封装,不得不说的是早就有人专门写 ...

  10. 【数学】codeforces A. Success Rate

    http://codeforces.com/contest/773/problem/A [思路] 用 (x+a)/(y+b) = p/q 来表示其核心思想,其中a 为做对的题目,b为做的题目,则有x+ ...