近期把做好的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. java 定时任务-servlet

    在web.xml中配置监听类. <listener> <listener-class>com.skin.generate.action.TaskManager</list ...

  2. docker 离线安装

    适用于: 1.内网安装docker 2.内网升级docker debian 8 sudo apt-get updatesudo apt-get install -d apt-transport-htt ...

  3. URAL1966 Cipher Message 3

    题目描述 题解: 能看出来的是,每一组数只能改最后一位,所以前$7$位动不了. 所以$KMP$跑一跑. 重点在于最后一位怎么搞. 如果$KMP$跑完了还没找到合适的位置,直接$puts("N ...

  4. [CF] 950B Intercepted Message

    B. Intercepted Message time limit per test1 second memory limit per test512 megabytes inputstandard ...

  5. (5) openssl speed(测试算法性能)和openssl rand(生成随机数)

    1.1 openssl speed 测试加密算法的性能 支持的算法有: openssl speed [md2] [mdc2] [md5] [hmac] [sha1] [rmd160] [idea-cb ...

  6. PHP fpm配置和优化

    pm.max_children = 1024 #最大子进程数 maximum number of child processes when pm is set to 'dynamic' or 'ond ...

  7. 基于selenium爬取拉勾网职位信息

    1.selenium Selenium 本是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.而这一特性为爬虫开发提供了一个选择及方向,由于其本身依赖 ...

  8. linux 文件三大特殊权限(SUID SGID SBIT)

    SGID(这个应该是文件共享里面最常用权限管理手段) 作用于目录或可执行程序,作用于目录代表在此目录创建的文件或目录,默认的属组继承此目录的属组.例如 我这个testgroup 没有设置SGID .我 ...

  9. python基础——7（函数）

    一.函数的定义(函数一定是先定义,后引用) 函数是完成特定功能的代码块. def:声明函数的关键字 fun:函数变量名 ():参数列表,参数可以是0-n个,但是()不能丢 函数体:实现功能的具体代码 ...

  10. LaTeX模板

    学校linux机子根本跑不动libreoffice,wps没有公式,只好上LaTeX了. 先 beamer: 需要安装firasans和firamono字体,思源黑体SC \documentclass ...