天天看点
返回

html5 开发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代码  

<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    

        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中查询设备密度的方法

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

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

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;   

之后：

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

Java代码

WebSettings webSettings = myWebView.getSettings();   

webSettings.setJavaScriptEnabled(true);  

final class InJavaScript {   

       public void runOnAndroidJavaScript(final String str) {   

        handler.post(new Runnable() {   

               public void run() {    

                   TextView show = (TextView) findViewById(R.id.textview);   

                   show.setText(str);   

               }   

           });   

       }   

   }  

//把本类的一个实例添加到js的全局对象window中，   

//这样就可以使用windows.injs来调用它的方法   

webView.addJavascriptInterface(new InJavaScript(), "injs");  

Js代码

function sendToAndroid(){   

        var str = "Cookie call the Android method from js";   

        windows.injs.runOnAndroidJavaScript(str);//调用android的函数   

function getFromAndroid(str){   

        document.getElementByIdx_x_x_x("android").innerHTML=str;   

Button button = (Button) findViewById(R.id.button);   

       button.setOnClickListener(new OnClickListener() {   

       public void onClick(View arg0) {   

            //调用javascript中的方法   

           webView.loadUrl("javascript:getFromAndroid('Cookie call the js function from Android')");   

   });  

//设置WebChromeClient   

webView.setWebChromeClient(new WebChromeClient(){   

    //处理javascript中的alert   

    public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {   

        //构建一个Builder来显示网页中的对话框   

        Builder builder = new Builder(MainActivity.this);   

        builder.setTitle("Alert");   

        builder.setMessage(message);   

        builder.setPositiveButton(android.R.string.ok,   

            new AlertDialog.OnClickListener() {   

                public void onClick(DialogInterface dialog, int which) {   

                    result.confirm();   

                }   

            });   

        builder.setCancelable(false);   

        builder.create();   

        builder.show();   

    };   

    //处理javascript中的confirm   

    public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {   

        builder.setTitle("confirm");   

        builder.setNegativeButton(android.R.string.cancel,   

            new DialogInterface.OnClickListener() {   

                    result.cancel();   

    @Override  

    //设置网页加载的进度条   

    public void onProgressChanged(WebView view, int newProgress) {   

        MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);   

        super.onProgressChanged(view, newProgress);   

    //设置应用程序的标题title   

    public void onReceivedTitle(WebView view, String title) {   

        MainActivity.this.setTitle(title);   

        super.onReceivedTitle(view, title);   

Js代码  

Js代码： console.log("Hello World");   

Log信息： Console: Hello World http://www.example.com/hello.html :82   

html5 开发android

myWebView.setWebChromeClient(new WebChromeClient() {   

    public void onConsoleMessage(String message, int lineNumber, String sourceID) {   

        Log.d("MyApplication", message + " -- From line "  

            + lineNumber + " of "  

            + sourceID);   

    public boolean onConsoleMessage(ConsoleMessage cm) {   

        Log.d("MyApplication", cm.message() + " -- From line "  

            + cm.lineNumber() + " of "  

            + cm.sourceId() );   

<script type="text/javascript">    

    localStorage.lastname="Smith";    

    document.write(localStorage.lastname);    

</script>    

    sessionStorage.lastname="Smith";    

    document.write(sessionStorage.lastname);   

</script>   

//清空storage   

localStorage.clear();   

//设置一个键值   

localStorage.setItem(“yarin”,“yangfegnsheng”);   

//获取一个键值   

localStorage.getItem(“yarin”);    

//获取指定下标的键的名称（如同Array）   

localStorage.key(0);    

//return “fresh” //删除一个键值   

localStorage.removeItem(“yarin”);   

注意一定要在设置中开启哦   

setDomStorageEnabled（true）  

//启用数据库   

webSettings.setDatabaseEnabled(true);     

String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();   

//设置数据库路径   

webSettings.setDatabasePath(dir);   

//使用localStorage则必须打开   

webSettings.setDomStorageEnabled(true);   

//扩充数据库的容量（在WebChromeClinet中实现）   

public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota,    

        long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {   

    quotaUpdater.updateQuota(estimatedSize * 2);   

function initDatabase() {   

try {   

    if (!window.openDatabase) {   

        alert('Databases are not supported by your browser');   

    } else {   

        var shortName = 'YARINDB';   

        var version = '1.0';   

        var displayName = 'yarin db';   

        var maxSize = 100000; // in bytes   

        YARINDB = openDatabase(shortName, version, displayName, maxSize);   

        createTables();   

        selectAll();   

} catch(e) {   

    if (e == 2) {   

        // Version mismatch.   

        console.log("Invalid database version.");   

        console.log("Unknown error "+ e +".");   

    return;   

function createTables(){   

    YARINDB.transaction(   

        function (transaction) {   

            transaction.executeSql('CREATE TABLE IF NOT EXISTS yarin(id INTEGER NOT NULL PRIMARY KEY, name TEXT NOT NULL,desc TEXT NOT NULL);', [], nullDataHandler, errorHandler);   

    );   

    insertData();   

function insertData(){   

        //Starter data when page is initialized   

        var data = ['1','yarin yang','I am yarin'];     

        transaction.executeSql("INSERT INTO yarin(id, name, desc) VALUES (?, ?, ?)", [data[0], data[1], data[2]]);   

    );     

function errorHandler(transaction, error){   

    if (error.code==1){   

        // DB Table already exists   

        // Error is a human-readable string.   

        console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');   

    return false;   

function nullDataHandler(){   

    console.log("SQL Query Succeeded");   

function selectAll(){    

            transaction.executeSql("SELECT * FROM yarin;", [], dataSelectHandler, errorHandler);   

function dataSelectHandler(transaction, results){   

    // Handle the results   

    for (var i=0; i<results.rows.length; i++) {   

        var row = results.rows.item(i);   

        var newFeature = new Object();   

        newFeature.name   = row['name'];   

        newFeature.decs = row['desc'];   

        document.getElementByIdx_x_x_x("name").innerHTML="name:"+newFeature.name;   

        document.getElementByIdx_x_x_x("desc").innerHTML="desc:"+newFeature.decs;   

function updateData(){   

            var data = ['fengsheng yang','I am fengsheng'];    

            transaction.executeSql("UPDATE yarin SET name=?, desc=? WHERE id = 1", [data[0], data[1]]);   

    selectAll();   

function ddeleteTables(){   

            transaction.executeSql("DROP TABLE yarin;", [], nullDataHandler, errorHandler);   

    console.log("Table 'page_settings' has been dropped.");   

注意onLoad中的初始化工作   

function initLocalStorage(){   

    if (window.localStorage) {   

        textarea.addEventListener("keyup", function() {   

            window.localStorage["value"] = this.value;   

            window.localStorage["time"] = new Date().getTime();   

        }, false);   

        alert("LocalStorage are not supported in this browser.");   

window.onload = function() {   

    initDatabase();   

    initLocalStorage();   

//启用地理定位   

webSettings.setGeolocationEnabled(true);   

//设置定位的数据库路径   

webSettings.setGeolocationDatabasePath(dir);   

//配置权限（同样在WebChromeClient中实现）   

public void onGeolocationPermissionsShowPrompt(String origin,    

               GeolocationPermissions.Callback callback) {   

    callback.invoke(origin, true, false);   

    super.onGeolocationPermissionsShowPrompt(origin, callback);   

Xml代码

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

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

//获取当前地理位置   

navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)   

//持续获取地理位置   

navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)   

//清除持续获取地理位置事件   

navigator.geolocation.clearWatch(watch_position_id)  

//定位   

function get_location() {   

    if (navigator.geolocation) {   

        navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});   

        alert("Your browser does not support HTML5 geoLocation");   

function show_map(position) {   

    var latitude = position.coords.latitude;   

    var longitude = position.coords.longitude;   

    var city = position.coords.city;   

    //telnet localhost 5554   

    //geo fix -82.411629 28.054553   

    //geo fix -121.45356 46.51119 4392   

    //geo nmea $GPGGA,001431.092,0118.2653,N,10351.1359,E,0,00,,-19.6,M,4.1,M,,0000*5B   

    document.getElementByIdx_x_x_x("Latitude").innerHTML="latitude:"+latitude;   

    document.getElementByIdx_x_x_x("Longitude").innerHTML="longitude:"+longitude;   

    document.getElementByIdx_x_x_x("City").innerHTML="city:"+city;   

function handle_error(err) {   

    switch (err.code) {   

    case 1:   

        alert("permission denied");   

        break;   

    case 2:   

        alert("the network is down or the position satellites can't be contacted");   

    case 3:   

        alert("time out");   

    default:   

        alert("unknown error");   

Manifest代码

CACHE MANIFEST    

#这是注释   

images/sound-icon.png   

images/background.png   

clock.html    

clock.css    

clock.js     

NETWORK:    

test.cgi   

CACHE:    

style/default.css   

FALLBACK:    

/files/projects /projects  

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛   

    window.applicationCache.update();   

｝   

//开启应用程序缓存   

webSettingssetAppCacheEnabled(true);   

String dir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();   

//设置应用缓存的路径   

webSettings.setAppCachePath(dir);   

//设置缓存的模式   

webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);   

//设置应用缓存的最大尺寸   

webSettings.setAppCacheMaxSize(1024*1024*8);   

//扩充缓存的容量   

public void onReachedMaxAppCacheSize(long spaceNeeded,   

            long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {   

    quotaUpdater.updateQuota(spaceNeeded * 2);   

javascript 前端开发 java android开发 html5 android html开发 android html页面 android获取到html android格式html页面 android html5功能
上一篇: SpringBoot访问jar包静态文件
下一篇: html5 图表相关

继续阅读