笛里谁知壮士心，沙头空照征人骨。这篇文章主要讲述Hybrid App适配Android注意点相关的知识，希望能为你提供帮助。
近期把做好的ipad html5混合应用适配到android上，发现android的webview比 iPad差太多了，android4.4因为升级到chromium。和chrome内核一致，全部问题不多，但android4.3下面的版本号兼容问题太多了，仅仅能一个一个慢慢攻克了！
眼下已经碰到了css3 flex box布局的兼容问题， js的兼容问题等。

• Android的 css3 flex box须要这样写

.frame-page {
    display: -moz-box; /* Firefox */
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box; /* Safari */
    display: -webkit-flex; /* Chrome, WebKit */
    display: box;
    display: flexbox;
    display: flex;
    width: 100%;
    height: 100%;
  flex-flow: row;
  background-color: #136185; }

• 屏幕密度的问题

    < meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi,width=device-width">



 
以下部分资源来自于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="https://www.songbingjia.com/android/hdpi.css"  />    
2. < link  rel="stylesheet"  media="screen  and  (-webkit-device-pixel-ratio:  1.0)"  href="https://www.songbingjia.com/android/mdpi.css"  />    
3. < link  rel="stylesheet"  media="screen  and  (-webkit-device-pixel-ratio:  0.75)"  href="https://www.songbingjia.com/android/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. }   

【Hybrid App适配Android注意点】后面的内容在中篇中继续

推荐阅读

• 

  万博职业技术学院地址 你要去就读吗
• 

  拍拍普洱茶，茶王茶业股份有限公司
• 

  王者荣耀打暴君主宰有什么用啊 王者荣耀打暴君主宰有什么用
• 

  博世壁挂炉代码03怎么回事,了解清楚这些就知道了
• 

  孝敬老人手抄报 孝敬老人手抄报怎么画
• 

  暖风来袭
• 

  胶原蛋白的功效与作用 胶原蛋白的禁忌
• 

  如何处理Win8.1系统IE11浏览器的兼容性问题？
• 

  女性创业如何走出自己的心理误区？
• 

  顿时词语如何造句
• 

  一万平米有多大
• 

  长平之战后,秦国为何错失灭赵良机？
• 

  集成电路的隐形杀手是什么
• 

  大麦若叶青汁的用途
• 

  明日之后蓝图变现功能怎么用
• 

  我吃苦耐劳,大家有没有挣钱的路子可以推荐？
• 

  win10穿越火线重启怎么解决
• 

  宫廷计手游怎么进阶丹青
• 

  redis集群模式原理 redis集群模式成熟吗
• 

  如何解决性能服务器泄漏问题？ 性能服务器泄漏怎么解决

• 推断client手机类型,并跳转到对应的app下载页面
• 安卓端通过http对Mysql进行增删改查
• Android studio没有org.apache.http.client.HttpClient;等包问题 解决方案
• 下拉列表框安卓3
• 初学安卓
• 安卓---TextVies
• Android 使用图片异步载入框架Universal Image Loader的问题
• Android打造随意层级树形控件考验你的数据结构和设计
• unity3d android动态更新dll