• 利用HTML5开发Android笔记（上篇）

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

    Html代码  收藏代码
    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的属性如下

    Html代码  收藏代码
    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种分辨率）

    Html代码  收藏代码
    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" />  

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

    Html代码  收藏代码
    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. }  
    Html代码  收藏代码
    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中查询设备密度的方法

    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()

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

    注意在manifest文件中加入访问互联网的权限：

    Xml代码  收藏代码
    1. <uses-permission android:name="android.permission.INTERNET" />  

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

    Java代码  收藏代码
    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对象是可以自己扩展的，例如

    Java代码  收藏代码
    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. }  

    之后：

    Java代码  收藏代码
    1. WebView myWebView = (WebView) findViewById(R.id.webview);  
    2. myWebView.setWebViewClient(new MyWebViewClient());  

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

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

    Java代码  收藏代码
    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. }  

    后面的内容在中篇中继续
  • 相关阅读:
    python 面向对象编程
    用python写个快排
    函数(参数，作用域，返回函数，匿名函数，偏函数)
    SpringBoot学习4：springboot整合listener
    SpringBoot学习1：创建第一个SpringBoot项目
    SpringBoot学习2：springboot整合servlet
    SpringBoot学习3：springboot整合filter
    使用FreeMarker导出word文档（支持导出图片）
    MySQL中实现递归查询
    MySQL中find_in_set()函数的使用
  • 原文地址：https://www.cnblogs.com/chengzhengfu/p/4603227.html
Copyright © 2020-2023  润新知