• 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;
        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="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. }  

    后面的内容在中篇中继续
  • 相关阅读:
    设计模式1 设计模式概述
    关于jdk的配置
    搭建webpack项目框架
    移动乐淘day1
    前后端开发（2）：浏览器与PHP程序的交互
    Ajax中post与get的区别
    Web前端：2、盒模型的组成
    Web前端：1、HTML&CSS概述及结构
    VMware11虚拟机安装Redhat6.5视频演示
    VMware虚拟机中安装Linux系统步骤（Redhat6.5）
  • 原文地址：https://www.cnblogs.com/mthoutai/p/6874825.html
Copyright © 2020-2023  润新知