您的位置：首页 > 移动开发 > Android开发

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

2016-03-31 15:02 302 查看

● Android设备多分辨率的问题

Android浏览器默认预览模式浏览会缩小页面 WebView中则会以原始大小显示

Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍

三种解决方式：1 viewport属性 2 CSS控制 3 JS控制

1 viewport属性放在HTML的<meta>中

Html代码

<head>

<title>Exmaple</title>

<meta name=”viewport” content=”width=device-width,user-scalable=no”/>

</head>

meta中viewport的属性如下

Html代码

#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);

}

}

Html代码

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

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.loadUrl("http://www.example.com");

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

Xml代码

<uses-permission android:name="android.permission.INTERNET" />

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

Java代码

//设置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对象是可以自己扩展的，例如

Java代码

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;

}

}

之后：

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);

myWebView.setWebViewClient(new MyWebViewClient());

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

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

Java代码

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {

myWebView.goBack();

return true;

}

return super.onKeyDown(keyCode, event);

}

后面的内容在中篇中继续

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航