近期把做好的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. Hydraulic Motor Manufacturers - What Is A Cycloidal Hydraulic Motor?

    The     Hydraulic Motor manufacturers    stated that the cycloidal hydraulic motor is fixedly connec ...

  2. 【lua实战摸索】在b.lua调用a.lua的函数

    需要掌握知识: lua table的使用(创建自己函数的表作为函数库) 普通函数的调用:tab.func(tab,参数) 等效于表中函数的调用tab:func(参数) 基本思路: 1.在相同目录下创建 ...

  3. 并发3-Volatile

    Volatile关键字实现原理 1.认识volatile关键字 程序举例 用一个线程读数据,一个线程改数据 存在数据的不一致性 2.机器硬件CPU与JMM (1)CPU Cache模 (2)CPU缓存 ...

  4. No-1.文件和目录

    文件和目录 01. 单用户操作系统和多用户操作系统(科普) 单用户操作系统:指一台计算机在同一时间 只能由一个用户 使用,一个用户独自享用系统的全部硬件和软件资源 Windows XP 之前的版本都是 ...

  5. 如何卸载eclipse中的pydev

    在Eclipse中依次点击菜单"Help"->"About Eclipse". 点击"Installation Details"按钮, ...

  6. Linux 系统内存分析

    1. 内存基本介绍 1.计算机基本结构: 电脑之父--冯·诺伊曼提出了计算机的五大部件:输入设备.输出设备.存储器.运算器和控制器 如图: 输入设备:键盘鼠标等 CPU:是计算机的运算核心和控制核心, ...

  7. Hibernate-03

    目的:表操作(表维护) 一.一对一(略过) 二.一对 1.建表原则:在多的一方创建外键指向一的一方的外键 2.建表:实体中添加 商品实体表: private Set<User> user ...

  8. LINUX：关于Redis集群搭建 、和搭建项目中遇到的问题

    文章来源:http://www.cnblogs.com/hello-tl/p/7804225.html 0.Redis的简单安装 1.安装redis依赖 # yum install gcc tcl g ...

  9. (一)Robot Framework安装

    准备工作: Python 2.7 (目前不能良好支持python3) pip 和 setuptools (Python 的套件管理程式,最新版的Python 2.7.16已包含) Robot Fram ...

  10. MySQL账户管理和主从同步

    账户管理 在生产环境下操作数据库时,绝对不可以使用root账户连接,而是创建特定的账户,授予这个账户特定 的操作权限,然后连接进行操作,主要的操作就是数据的CRUD(增删改查) MySQL账户体系:根 ...