资源来自于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>中
<head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head>
meta中viewport的属性如下
<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]
"
/>
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 {
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);
}
后面的内容在中篇中继续
分享到:
相关推荐
#### 5. 使用 AIR SDK 创建第一个基于 HTML 的 AIR 应用程序 - **HTML/CSS/JavaScript编码**:编写HTML、CSS和JavaScript代码。 - **打包为AIR**:使用AIR SDK工具将项目打包成AIR应用。 #### 6. 使用 Flex SDK ...
2. **HTML5游戏开发**:HTML5是一种标记语言,用于创建网页内容,而HTML5游戏则是利用HTML5、CSS3和JavaScript等技术开发的游戏,可以在各种现代浏览器上运行,无需插件。HTML5游戏的优点包括跨平台兼容性、离线存储...
在Web开发方面,笔记可能会深入讲解如何利用HTML、CSS和JavaScript创建动态、响应式的网页,这是所有Web应用的基础。HTML负责内容结构,CSS负责样式呈现,而JavaScript则是实现交互性和功能的关键。此外,考虑到...
### 新版Android开发教程+笔记7--基础UI编程1 #### 知识点概览 本教程主要聚焦于Android开发的基础UI编程,包括了TextView标签的使用及其样式调整,以及如何利用`android.graphics.Color`来实现颜色变幻效果。通过...
本篇笔记主要介绍了如何在Android应用中读取和展示PPT(主要是PPTX格式)以及PDF文件。 首先,我们来看如何读取PPT文件,这里主要针对的是PPTX格式,因为它是Office 2007之后广泛使用的XML文档格式。读取PPTX文件...
### Python-Android开发环境搭建与应用 #### 一、引言 随着移动互联网技术的快速发展,Android...总之,通过本文介绍的方法,开发者可以在Android平台上充分利用Python的强大功能,为自己的应用程序增添更多可能性。
Android 学习笔记(一)主要介绍了Android开发的基础知识,包括Android的架构、特点以及一些开发资源。首先,文章提到Android开发者官方网站developer.android.com无法访问,建议使用替代网址如...
HTML5是Web开发领域的一次重大革新,它不仅在语法上进行了优化,还引入了许多新的元素和特性,旨在提升网页的交互性和语义性。HTML5不再区分关键字的大小写,也不强制要求属性值必须使用特定类型的引号,这使得代码...
本项目是一个专门针对Android平台的Markdown解析器,它利用了RxJava库来实现在TextView和EditText上的渲染功能。 RxJava是一个在Java VM上使用反应式编程的库,它可以处理异步数据流,提供了一种声明式的方法来订阅...
1. 交互式表单:利用HTML5的新表单控件和验证属性,可以创建用户友好的、功能强大的表单,例如自动检查邮箱格式。 2. 画布游戏:通过canvas API实现简单的游戏,如打飞碟、贪吃蛇等,提升网页娱乐性。 3. 本地存储...
在Android开发中,UI编程是构建用户界面的关键部分,它涉及到如何展示信息、接收用户输入以及创建美观的应用体验。本教程主要围绕基础UI编程的第一部分展开,特别关注TextView的使用和颜色变换。 首先,我们来看...
本文将深入探讨Android环境下如何利用富文本解析器处理Html和Markdown内容。 一、富文本解析器的重要性 在移动应用开发中,尤其是在社交、阅读、博客等场景,往往需要展示带有格式、链接、图片、颜色等多样性的文本...
通过本次课程的学习,初学者能够建立起关于Android应用开发的基础认知,并掌握如何利用View组件构建美观实用的用户界面。此外,借助官方提供的资源和支持,开发者能够在后续的学习和实践中不断深化理解,提高技术...
### Pro Android Web Apps:利用HTML5、CSS3与JavaScript开发 #### 一、书籍概述 《Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript》是一本旨在教授开发者如何利用HTML5、CSS3及...
### ionic3开发笔记知识点概览 #### 一、Ionic框架简介 Ionic是一个开源的前端框架,用于构建高质量的跨平台移动应用。它基于HTML5技术栈,支持使用Web技术如HTML、CSS和JavaScript来开发应用程序。Ionic 3是该...
在Android开发中,资源(Resource)是一个至关重要的概念,它包括了应用程序运行所需的各种非代码元素,如布局、图片、字符串、颜色等。资源文件通常存储在项目的`res/`目录下,被组织成不同的子目录,以便于管理和...
【标题】"模拟安卓印象笔记"的实现涉及到了多个关键知识点,主要集中在富文本编辑、图像处理和应用程序设计上。 【富文本编辑器】:在安卓应用开发中,富文本编辑器是用于处理包含多种格式(如字体、颜色、大小、...