利用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>中
- <span style="font-size: x-small;"> <head>
- <title>Exmaple</title>
- <meta name=”viewport” content=”width=device-width,user-scalable=no”/>
- </head></span>
meta中viewport的属性如下
- <span style="font-size: x-small;"> <meta name="viewport"
- content="
- height = [pixel_value | device-height] ,
- width = [pixel_value | device-width ] ,
- initial-scale = float_value ,
- minimum-scale = float_value ,
- maximum-scale = float_value ,
- user-scalable = [yes | no] ,
- target-densitydpi = [dpi_value | device-dpi |
- high-dpi | medium-dpi | low-dpi]
- "
- /></span>
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
- <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
- <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
- <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
在一个样式表中,指定不同的样式
- #header {
- <span style="white-space: pre;"> </span> background:url(medium-density-image.png);
- }
- @media screen and (-webkit-device-pixel-ratio: 1.5) {
- // CSS for high-density screens
- #header {
- background:url(high-density-image.png);
- }
- }
- @media screen and (-webkit-device-pixel-ratio: 0.75) {
- // CSS for low-density screens
- #header {
- background:url(low-density-image.png);
- }
- }
- <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中查询设备密度的方法
- if (window.devicePixelRatio == 1.5) {
- alert("This is a high-density screen");
- } else if (window.devicePixelRation == 0.75) {
- alert("This is a low-density screen");
- }
● Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签
WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页
在WebView中加载Web页面,使用loadUrl()
- WebView myWebView = (WebView) findViewById(R.id.webview);
- myWebView.loadUrl("http://www.example.com");
注意在manifest文件中加入访问互联网的权限:
- <uses-permission android:name="android.permission.INTERNET" />
在Android中点击一个链接,默认是调用应用程序来启动,因此WebView需要代为处理这个动作 通过WebViewClient
- //设置WebViewClient
- webView.setWebViewClient(new WebViewClient(){
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
- view.loadUrl(url);
- return true;
- }
- public void onPageFinished(WebView view, String url) {
- super.onPageFinished(view, url);
- }
- public void onPageStarted(WebView view, String url, Bitmap favicon) {
- super.onPageStarted(view, url, favicon);
- }
- });
这个WebViewClient对象是可以自己扩展的,例如
- private class MyWebViewClient extends WebViewClient {
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
- if (Uri.parse(url).getHost().equals("www.example.com")) {
- return false;
- }
- Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
- startActivity(intent);
- return true;
- }
- }
之后:
- WebView myWebView = (WebView) findViewById(R.id.webview);
- myWebView.setWebViewClient(new MyWebViewClient());
另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器,也就是需要可以回退历史记录
因此需要覆盖系统的回退键 goBack,goForward可向前向后浏览历史页面
- public boolean onKeyDown(int keyCode, KeyEvent event) {
- if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {
- myWebView.goBack();
- return true;
- }
- return super.onKeyDown(keyCode, event);
- }
后面的内容在中篇中继续
利用HTML5开发Android笔记(上篇)的更多相关文章
- 利用HTML5开发Android笔记(下篇)
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...
- 利用HTML5开发Android笔记(中篇)
资源来自于www.mhtml5.com 杨丰盛老师成都场的PPT分享 一个很简明的demo 可以作为入门基础 学习的过程中做了点笔记 整理如下 虽然内容比较简单 但是数量还是比较多的 所以分了3篇 ( ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- 利用HTML5开发Android(6)---构建HTML5离线应用
需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源例如 Manifest代码 CACHE MANIFEST #这是注释 images/sound-icon.png ima ...
- 利用HTML5开发Android(5)---HTML5地理位置服务在Android中的应用
Android中 Java代码 //启用地理定位 webSettings.setGeolocationEnabled(true); //设置定位的数据库路径 webSettings.setGeoloc ...
- 利用HTML5开发Android
● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...
- 【转】利用HTML5开发Android
● Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的 ...
- 利用HTML5开发Android(2)---Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签 WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页 在WebView中 ...
随机推荐
- Use Private Members from Base Class
最近看了一段代码:在导出类中调用继承自基类的某个public函数,该函数中对基类中的private数据成员 进行了赋值并将结果打印.看到程序的运行结果后,顿时感觉自己之前(我之前的理解这里就不说明了) ...
- 常用python模块
webbrowser浏览器控制模块 主要知道 导入 webbrowser使用webbrowser.open(url)运行就可以在默认浏览器打开指定url 来自为知笔记(Wiz)
- MySQL数据库(6)_用户操作与权限管理、视图、存储过程、触发器、基本函数
用户操作与权限管理 MySQL用户操作 创建用户 方法一: CREATE USER语句创建 CREATE USER "用户名"@"IP地址" IDENTIFIE ...
- Oracle表约束
约束的概述: 约束是在表中定义的用于维护数据库完整性的一些规则 (1).主键约束 不能为空也不能重复 在一个表中只能定义一个主键约束 Oracle会在主键上建立一个唯一索引,可以指定唯一索引的存储位置 ...
- [SCOI2013]火柴棍数字(背包)
题目 做饭 由于越高位越好,我们先得出能组成的最高位 \(f[i][j][k]\)表示从低到高位第\(i\)位,手里拿着\(j\)根火柴,第\(i\)位是否为\(0\)所需要的最少火柴 我们转移仅需得 ...
- [POI2008]账本BBB
题目 BZOJ 做法 明确: \(~~~1.\)为了达到目标分数所取反的次数是固定的 \(~~~2.\)为了满足前缀非负,得增加取反和滚动次数 滚动的次数可以枚举,增加的取反可以通过最小前缀和得到 滚 ...
- 跨平台移动开发_Windows 8平台使用 PhoneGap 方法
原文地址: Using PhoneGap in Windows 8 Store Applications 下载phonegap 2.9.1 下载地址: https://codeload.github. ...
- axios拦截器/http
Interceptors //处理请求或响应之前拦截请求或响应. //添加一个请求拦截器 axios.interceptors.request.use(function (config) { //在请 ...
- 大话设计模式之PHP篇 - 适配器模式
定义将一个类的接口转换成客户希望的另外一个接口,使用原本不兼容的而不能在一起工作的那些类可以在一起工作. 角色Target适配目标,该角色定义把其他类转换为何种接口,也就是我们的期望接口.Adapte ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...