Угловые стили материала не применяются

0

Я использую приложение Angular Material на Android-устройстве с помощью Cordova. Когда я тестирую приложение с помощью браузера рабочего стола, применяются все стили CSS. Однако мобильный WebView не применяет CSS к md- (директивы AngularJS).

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):/);
});

Платформа Кордовы: android 4.1.1

Настольный браузер

Изображение 174551

Android-устройство

Изображение 174551

Журналы устройств

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

Пожалуйста, помогите мне узнать, что случилось со стилями.

Теги:
angular-material
cordova

1 ответ

0
Лучший ответ

Android 4.1 до 4.4 не поддерживается. Используйте плагин для пешеходного перехода, и все будет работать так, как должно.

https://crosswalk-project.org

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню