• 欢迎访问小杰博客网站
  • 欢迎访问小杰博客网站哦

js/css/android获取设备密度的方法大全

未分类 小杰 4年前 (2015-06-16) 164次浏览 已收录 0个评论

资源来自于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>中

 

Html代码  收藏代码

  1. <span style=“font-size: x-small;”>  <head>   
  2.         <title>Exmaple</title>   
  3.         <meta name=”viewport” content=”width=device-width,user-scalable=no/>   
  4.     </head></span>  

 


meta中viewport的属性如下

 

Html代码  收藏代码

  1. <span style=“font-size: x-small;”>  <meta name=“viewport”  
  2.         content=”  
  3.             height = [pixel_value | device-height] ,  
  4.             width = [pixel_value | device-width ] ,  
  5.             initial-scale = float_value ,  
  6.             minimum-scale = float_value ,  
  7.             maximum-scale = float_value ,  
  8.             user-scalable = [yes | no] ,  
  9.             target-densitydpi = [dpi_value | device-dpi |  
  10.             high-dpi | medium-dpi | low-dpi]  
  11.         ”  
  12.     /></span>  

 

 

2 CSS控制设备密度

为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)

 

Html代码  收藏代码

  1. <link rel=“stylesheet” media=“screen and (-webkit-device-pixel-ratio: 1.5)” href=“hdpi.css” />  
  2. <link rel=“stylesheet” media=“screen and (-webkit-device-pixel-ratio: 1.0)” href=“mdpi.css” />  
  3. <link rel=“stylesheet” media=“screen and (-webkit-device-pixel-ratio: 0.75)” href=“ldpi.css” />  

 

在一个样式表中,指定不同的样式

 

Html代码  收藏代码

  1. #header {   
  2.  <span style=“white-space: pre;”>       </span> background:url(medium-density-image.png);   
  3. }  
  4. @media screen and (-webkit-device-pixel-ratio: 1.5) {   
  5.     // CSS for high-density screens   
  6.     #header {   
  7.         background:url(high-density-image.png);   
  8.     }   
  9. }   
  10. @media screen and (-webkit-device-pixel-ratio: 0.75) {   
  11.     // CSS for low-density screens   
  12.     #header {   
  13.         background:url(low-density-image.png);   
  14.     }   
  15. }  

 

 

Html代码  收藏代码

  1. <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代码  收藏代码

  1. if (window.devicePixelRatio == 1.5) {  
  2.     alert(“This is a high-density screen”);  
  3. else if (window.devicePixelRation == 0.75) {  
  4.     alert(“This is a low-density screen”);  
  5. }  

 

● Android中构建HTML5应用

使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签

WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页

在WebView中加载Web页面,使用loadUrl()

Java代码  收藏代码

  1. WebView myWebView = (WebView) findViewById(R.id.webview);  
  2. myWebView.loadUrl(“http://www.example.com”);  

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

Xml代码  收藏代码

  1. <uses-permission android:name=“android.permission.INTERNET” />  

 

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

Java代码  收藏代码

  1. //设置WebViewClient  
  2. webView.setWebViewClient(new WebViewClient(){     
  3.     public boolean shouldOverrideUrlLoading(WebView view, String url) {     
  4.         view.loadUrl(url);     
  5.         return true;     
  6.     }    
  7.     public void onPageFinished(WebView view, String url) {  
  8.             super.onPageFinished(view, url);  
  9.     }  
  10.     public void onPageStarted(WebView view, String url, Bitmap favicon) {  
  11.         super.onPageStarted(view, url, favicon);  
  12.     }  
  13. });  

这个WebViewClient对象是可以自己扩展的,例如

Java代码  收藏代码

  1. private class MyWebViewClient extends WebViewClient {  
  2.     public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  3.         if (Uri.parse(url).getHost().equals(“www.example.com”)) {  
  4.             return false;  
  5.         }  
  6.         Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));  
  7.     startActivity(intent);  
  8.     return true;  
  9.     }  
  10. }  

 

之后:

Java代码  收藏代码

  1. WebView myWebView = (WebView) findViewById(R.id.webview);  
  2. myWebView.setWebViewClient(new MyWebViewClient());  

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

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

Java代码  收藏代码

  1. public boolean onKeyDown(int keyCode, KeyEvent event) {  
  2.     if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {  
  3.         myWebView.goBack();  
  4.         return true;  
  5.     }  
  6.     return super.onKeyDown(keyCode, event);  
  7. }  

小杰博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js/css/android获取设备密度的方法大全
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址