角材质样式不应用 [英] Angular Material styles are not applied

查看：178
本文介绍了角材质样式不应用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在Android设备上使用科尔多瓦运行角材料应用程序。当我使用桌面浏览器中测试应用程序，所有的CSS样式应用于。然而，移动的WebView未申请CSS的 MD - 标签（AngularJS指令）

I'm running Angular Material app on Android device using Cordova. When I test the app using a desktop browser, all CSS styles are applied. However, mobile WebView fails to apply CSS to the md- tags(AngularJS directives).

的index.html 

<!DOCTYPE html>
<html ng-app="buttonsDemo1">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *"/>
    <title>test</title>

    <link rel="stylesheet" href="./bower_components/angular-material/angular-material.css"/>

    <script type="text/javascript" src="./bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="./bower_components/angular-animate/angular-animate.js"></script>
    <script type="text/javascript" src="./bower_components/angular-aria/angular-aria.js"></script>

    <script type="text/javascript" src="./bower_components/angular-material/angular-material.js"></script>
    <script src="./js/test.js"></script>
  </head>
  <body>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <md-button class="md-icon-button md-default-theme" ng-click="app.toggleSidenav('left')"
          aria-label="menu" hide-gt-md>
          <md-icon md-svg-src="img/ic_menu_white_24px.svg"></md-icon>
        </md-button>
        <h3>ttt</h3>
        <span flex></span>
      </div>
    </md-toolbar>

    <script type="text/javascript" src="cordova.js"></script>
  </body>
</html>

JS / test.js 

window.onerror = function(message, url, lineNumber) {
  console.log("Error: "+message+" in "+url+" at line "+lineNumber);
};

window.angular.module('buttonsDemo1', [
  'ngAnimate',
  'ngMaterial'
])
.config(function($compileProvider){
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension):/);
});

科尔多瓦平台：的Andr​​oid 4.1.1

桌面浏览器

桌面浏览器

Android设备

Android设备

设备日志 

10-13 17:28:42.688    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ Late-enabling CheckJNI
10-13 17:28:42.739    7521-7521/ru.megagroup.megagrouppartner I/dalvikvm﹕ Could not find method android.webkit.WebView.setWebContentsDebuggingEnabled, referenced from method org.apache.cordova.engine.SystemWebViewEngine.enableRemoteDebugging
10-13 17:28:42.739    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to resolve static method 193: Landroid/webkit/WebView;.setWebContentsDebuggingEnabled (Z)V
10-13 17:28:42.739    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ VFY: replacing opcode 0x71 at 0x0001
10-13 17:28:42.789    7521-7535/ru.megagroup.megagrouppartner D/webcoreglue﹕ netstack: Memory Cache feature is ON
10-13 17:28:42.789    7521-7521/ru.megagroup.megagrouppartner I/dalvikvm﹕ Could not find method android.webkit.CookieManager.setAcceptThirdPartyCookies, referenced from method org.apache.cordova.engine.SystemCookieManager.<init>
10-13 17:28:42.789    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to resolve virtual method 145: Landroid/webkit/CookieManager;.setAcceptThirdPartyCookies (Landroid/webkit/WebView;Z)V
10-13 17:28:42.789    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ VFY: replacing opcode 0x6e at 0x0016
10-13 17:28:42.789    7521-7521/ru.megagroup.megagrouppartner I/dalvikvm﹕ Could not find method android.webkit.CookieManager.flush, referenced from method org.apache.cordova.engine.SystemCookieManager.flush
10-13 17:28:42.789    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to resolve virtual method 140: Landroid/webkit/CookieManager;.flush ()V
10-13 17:28:42.789    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ VFY: replacing opcode 0x6e at 0x0008
10-13 17:28:42.819    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to find class referenced in signature (Landroid/webkit/ClientCertRequest;)
10-13 17:28:42.819    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to find class referenced in signature (Landroid/webkit/ClientCertRequest;)
10-13 17:28:42.819    7521-7521/ru.megagroup.megagrouppartner I/dalvikvm﹕ Could not find method android.webkit.WebViewClient.onReceivedClientCertRequest, referenced from method org.apache.cordova.engine.SystemWebViewClient.onReceivedClientCertRequest
10-13 17:28:42.819    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to resolve virtual method 198: Landroid/webkit/WebViewClient;.onReceivedClientCertRequest (Landroid/webkit/WebView;Landroid/webkit/ClientCertRequest;)V
10-13 17:28:42.819    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ VFY: replacing opcode 0x6f at 0x001a
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to find class referenced in signature (Landroid/webkit/PermissionRequest;)
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner I/dalvikvm﹕ Could not find method android.webkit.PermissionRequest.getResources, referenced from method org.apache.cordova.engine.SystemWebChromeClient.onPermissionRequest
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to resolve virtual method 156: Landroid/webkit/PermissionRequest;.getResources ()[Ljava/lang/String;
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ VFY: replacing opcode 0x6e at 0x000d
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner I/dalvikvm﹕ Could not find method android.webkit.WebChromeClient$FileChooserParams.createIntent, referenced from method org.apache.cordova.engine.SystemWebChromeClient.onShowFileChooser
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner W/dalvikvm﹕ VFY: unable to resolve virtual method 161: Landroid/webkit/WebChromeClient$FileChooserParams;.createIntent ()Landroid/content/Intent;
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner D/dalvikvm﹕ VFY: replacing opcode 0x6e at 0x0000
10-13 17:28:42.829    7521-7521/ru.megagroup.megagrouppartner D/SystemWebViewEngine﹕ CordovaWebView is running on device made by: Sony
10-13 17:28:42.849    7521-7535/ru.megagroup.megagrouppartner D/JSENGINE﹕ qualcomm.jsengine.version:C.2-patch35-git:7b7ad6f
10-13 17:28:43.189    7521-7521/ru.megagroup.megagrouppartner D/libEGL﹕ loaded /vendor/lib/egl/libEGL_adreno.so
10-13 17:28:43.219    7521-7521/ru.megagroup.megagrouppartner D/libEGL﹕ loaded /vendor/lib/egl/libGLESv1_CM_adreno.so
10-13 17:28:43.229    7521-7521/ru.megagroup.megagrouppartner D/libEGL﹕ loaded /vendor/lib/egl/libGLESv2_adreno.so
10-13 17:28:43.239    7521-7521/ru.megagroup.megagrouppartner I/Adreno-EGL﹕ <qeglDrvAPI_eglInitialize:316>: EGL 1.4 QUALCOMM build:  (CL4169980)
    OpenGL ES Shader Compiler Version: 17.01.10.SPL
    Build Date: 11/04/13 Mon
    Local Branch:
    Remote Branch:
    Local Patches:
    Reconstruct Branch:
10-13 17:28:43.529    7521-7535/ru.megagroup.megagrouppartner D/HostStatisticManager﹕ netstack: DNS Host Prioritization is: ON, Version: 5.0.1
10-13 17:28:43.529    7521-7535/ru.megagroup.megagrouppartner I/﹕ netstack: LIB_MGR - Lib loaded: libdnshostprio.so
10-13 17:28:43.539    7521-7535/ru.megagroup.megagrouppartner I/﹕ netstack: STAT_HUB - Succeeded to load plugin: libdnshostprio.so
10-13 17:28:43.539    7521-7535/ru.megagroup.megagrouppartner E/﹕ netstack: LIB_MGR - Error loading lib spl_proc_plugin.so
10-13 17:28:43.539    7521-7535/ru.megagroup.megagrouppartner E/﹕ netstack: STAT_HUB - Failed to load plugin: spl_proc_plugin.so
10-13 17:28:43.539    7521-7535/ru.megagroup.megagrouppartner I/﹕ netstack: LIB_MGR - Lib loaded: pp_proc_plugin.so
10-13 17:28:43.539    7521-7535/ru.megagroup.megagrouppartner I/﹕ netstack: STAT_HUB - Succeeded to load plugin: pp_proc_plugin.so
10-13 17:28:43.539    7521-7535/ru.megagroup.megagrouppartner E/﹕ netstack:  STAT_HUB - App ru.megagroup.megagrouppartner isn't supported
10-13 17:28:43.609    7521-7521/ru.megagroup.megagrouppartner D/OpenGLRenderer﹕ Enabling debug mode 0
10-13 17:28:43.609    7521-7521/ru.megagroup.megagrouppartner I/Choreographer﹕ Skipped 43 frames!  The application may be doing too much work on its main thread.
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner D/﹕ external/chromium/net/socket/tcp_fin_aggregation_factory.cc: libtcpfinaggr.so successfully loaded
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner I/QCNEA﹕ |CAC| CAS is enabled
10-13 17:28:43.960    7521-7631/ru.megagroup.megagrouppartner I/QCNEA﹕ |CAC| [CNE CLIENT STATE MACHINE] transition NOT_CONNECTED_NOT_ATTEMPTED -> CONNECTING
10-13 17:28:43.960    7521-7631/ru.megagroup.megagrouppartner D/QCNEA﹕ |CAC| Connected to server socket: 76
10-13 17:28:43.960    7521-7631/ru.megagroup.megagrouppartner I/QCNEA﹕ |CAC| [CNE CLIENT STATE MACHINE] transition CONNECTING -> CONNECTED_PENDING_PERM_RESPONSE
10-13 17:28:43.960    7521-7631/ru.megagroup.megagrouppartner D/QCNEA﹕ |CAC| In monitor thread, performing select
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner D/﹕ external/chromium/net/socket/tcp_fin_aggregation_factory.cc,: TCP Fin Aggregation initializing method was found in libtcpfinaggr.so
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner D/TCPFinAggregation﹕ netstack: TCPFinAggregation is 1, Version 5.0.1
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner D/TCPFinAggregation﹕ system property net.tcp.fin.aggregation.wait was set, value: 20
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner D/TCPFinAggregation﹕ system property net.tcp.fin.aggregation.close was set, value: 300
10-13 17:28:43.960    7521-7535/ru.megagroup.megagrouppartner D/TCPFinAggregation﹕ netstack: CloseUnusedSockets is ON, (TCPFinAggregation), Version 5.0.1
10-13 17:28:44.000    7521-7631/ru.megagroup.megagrouppartner D/QCNEA﹕ |CAC| readCallback: read len:12, ret:0, errno:0
10-13 17:28:44.000    7521-7631/ru.megagroup.megagrouppartner I/QCNEA﹕ |CAC| [CNE CLIENT STATE MACHINE] transition CONNECTED_PENDING_PERM_RESPONSE -> NOT_CONNECTED_ACCESS_DENIED
10-13 17:28:44.000    7521-7631/ru.megagroup.megagrouppartner D/QCNEA﹕ |CAC| readCallback: read len:0, ret:0, errno:0
10-13 17:28:44.000    7521-7535/ru.megagroup.megagrouppartner I/QCNEA﹕ |CAC| client permission denied.
10-13 17:28:44.000    7521-7631/ru.megagroup.megagrouppartner E/QCNEA﹕ |CAC| readCallback: end of stream
10-13 17:28:44.000    7521-7631/ru.megagroup.megagrouppartner D/QCNEA﹕ |CAC| Monitor loop is terminating
10-13 17:28:44.000    7521-7535/ru.megagroup.megagrouppartner D/TCPFinAggregation﹕ Failed to get network status! received ret: -6
10-13 17:28:44.000    7521-7535/ru.megagroup.megagrouppartner D/Socket_Pool﹕ netstack: CloseUnusedSockets is ON
10-13 17:28:44.000    7521-7535/ru.megagroup.megagrouppartner D/Socket_Pool﹕ netstack: system net.statistics value: 0
10-13 17:28:44.000    7521-7535/ru.megagroup.megagrouppartner D/Socket_Pool﹕ netstack: CloseUnusedSockets is ON
10-13 17:28:44.000    7521-7535/ru.megagroup.megagrouppartner D/Socket_Pool﹕ netstack: system net.statistics value: 0
10-13 17:28:44.020    7521-7535/ru.megagroup.megagrouppartner D/﹕ external/chromium/net/http/http_getzip_factory.cc: libgetzip.so successfully loaded
10-13 17:28:44.020    7521-7535/ru.megagroup.megagrouppartner D/﹕ external/chromium/net/http/http_getzip_factory.cc,: GETzip initializing method was found in libgetzip.so
10-13 17:28:44.020    7521-7535/ru.megagroup.megagrouppartner D/﹕ netstack: Getzip is: ON, Version: 5.0.1
10-13 17:28:44.961    7521-7521/ru.megagroup.megagrouppartner D/JsMessageQueue﹕ Set native->JS mode to OnlineEventsBridgeMode
10-13 17:28:49.806    7521-7521/ru.megagroup.megagrouppartner D/TilesManager﹕ Starting TG #0, 0x5fabddd8
10-13 17:28:49.806    7521-7521/ru.megagroup.megagrouppartner D/TilesManager﹕ new EGLContext from framework: 5ebc0b08
10-13 17:28:49.806    7521-7521/ru.megagroup.megagrouppartner D/GLWebViewState﹕ Reinit shader
10-13 17:28:49.936    7521-7521/ru.megagroup.megagrouppartner D/GLWebViewState﹕ Reinit transferQueue

请帮我找出什么毛病的样式。

Please help me to find out what's wrong with the styles.

推荐答案

Android 4.1到4.4心不是支持。使用人行横道插件，一切都将工作，因为它应该。

Android 4.1 to 4.4 isnt supported. Use crosswalk plugin and everything will work as it should.

https://crosswalk-project.org

这篇关于角材质样式不应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆