资源来自于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. }

后面的内容在中篇中继续

利用HTML5开发Android笔记（上篇）的更多相关文章

  1. 利用HTML5开发Android笔记（下篇）

    资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...

  2. 利用HTML5开发Android笔记（中篇）

    资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...

  3. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  4. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  5. 利用HTML5开发Android(6)---构建HTML5离线应用

    需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源例如 Manifest代码 CACHE MANIFEST #这是注释 images/sound-icon.png ima ...

  6. 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用

    Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...

  7. 利用HTML5开发Android

    ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...

  8. 【转】利用HTML5开发Android

    ● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...

  9. 利用HTML5开发Android(2)---Android中构建HTML5应用

    使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签 WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页 在WebView中 ...

随机推荐

  1. 剑指offer 面试40题

    面试40题: 题目:最小的k个数 题:输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 解题代码一: # -*- coding ...

  2. 剑指offer面试54题

    面试54题: 题目:二叉搜索树的第K大节点 题:给定一颗二叉搜索树,请找出其中的第k小的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 中,按结点数值大小顺序第三个结点的值为4. 解题思 ...

  3. C语言运算符优先级误解

    优先级问题 表达式 可能误以为的结果 实际结果 .的优先级高于*. ->操作符用于消除这个问题 *p.f p所指对象的字段f. (*p).f 对p去f偏移,作为指针,然后进行解除引用操作. *( ...

  4. CuteEditor.Editor+a+a+c+a+a.a() System.RuntimeType.get_Assembly() 问题解决方法

    问题: Server Error in '/' Application. Attempt by method 'CuteEditor.Editor+a+a+c+a+a.a()' to access m ...

  5. UI设计中的各种小控件

    xib支持图形化操作,提供了几乎所有的控件可供选择,只需拖动到相应的位置即可,但是控件的后台代码仍然需要手动编写,一定程度上加速了前台的开发. xib快速开发程序,手写代码速度比较慢 xib适合做静态 ...

  6. json教程系列（2）-生成JSONObject的方法

    生成JSONObject一般有两种方式,通过javabean或者map类型来生成.如下面的例子:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...

  7. css系列（4）简介

        本节用来简单介绍css.     (1)css: CSS 指层叠样式表 (Cascading Style Sheets): 功能以及作用:1.样式定义如何显示 HTML 元素; 2.样式通常存 ...

  8. Spring session共享（使用redis）

    SpringBoot+Redis实现HttpSession共享 前提:需要使用redis做session存储 一.效果演练(这里使用SpringBoot工程,Spring同理) 1.一个工程使用两个端 ...

  9. java 图片Base64字符串转图片二进制数组

    public static byte[] base64ToImgByteArray(String base64) throws IOException{ sun.misc.BASE64Decoder ...

  10. linux创建指定大小的文件

    一.生成文件大小和实际占空间大小一样的文件 dd if=/dev/zero of=50M.file bs=1M count=50 dd if=/dev/zero of=20G.file bs=1G c ...