利用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中 ...
随机推荐
- Python 2 一些实用模块的使用
time模块,sys模块,os模块,random模块, shutil模块, json & pickle 模块,re模块 time模块: 在Python中,通常有这几种方式来表示时间:1)时间戳 ...
- ubuntu: lightdm 登录root超级管理员方法
ubuntu 12.04 lts 默认是不允许root登录的, 在登录窗口只能看到普通用户和访客登录. 以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后, 修改系统配置文件需要切换到超级 ...
- ACM训练小结-2018年6月16日
今天题目情况如下:A题:线段树+XOR性质.情况:由于写法问题,调试困难,浪费大量时间.B题:(对所有满足i mod p==q,求a[i]之和),无修改,直接上n*sqrt(n)的分块写法.情况:由于 ...
- Python 字典Dict概念和操作
# 字典概念:无序的, 可变的键值对集合 # 定义 # 方式1 # {key: value, key: value...} # 例如 # {"name": "xin&qu ...
- [Android]开源中国源码分析之二---DrawerLayout
从启动界面到主界面之后的效果如图所示,采用的是v4包下的DrawerLayout, activity_main.xml文件如下: <!-- A DrawerLayout is intended ...
- nginx最常见的18道面试题
Nginx的并发能力在同类型网页服务器中的表现,相对而言是比较好的,因此受到了很多企业的青睐,我国使用Nginx网站的知名用户包括腾讯.淘宝.百度.京东.新浪.网易等等.Nginx是网页服务器运维人员 ...
- 解决Linux系统在设置alias命令重启后失效的问题
在使用linux系统的过程中,大多数情况下都是在字符界面下进行的.有些比较长的命令我们不希望每次都重复输入,这样不仅浪费时间而且还容易出错:我们会使用alias命令来解决 比如: alias ll=' ...
- 未能将网站配置为使用ASP.NET4.X 解决方法
WIN 10系统安装Visual Studio 2012新建ASP.NET MVC 4 WEB 应用程序出错 有些图片是网上截取而来,之前光顾着处理问题而忘记截图了,提示的ASP.net 版本有些不同 ...
- 【bzoj1345】[Baltic2007]序列问题Sequence
题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1345 因为合并的花费是较大数的权值,所以每个数肯定是和附近的小数合并完后才与大数合并, ...
- java JSON 序列化类(List<Object> 转String)
import com.alibaba.fastjson.JSONObject; import com.google.common.base.Preconditions; import com.goog ...