Maison > interface Web > tutoriel CSS > ## Pourquoi mon Android WebView se comporte-t-il si mal ? Pages vierges, styles qui ne répondent pas, animations saccadées : comment puis-je y remédier ?

## Pourquoi mon Android WebView se comporte-t-il si mal ? Pages vierges, styles qui ne répondent pas, animations saccadées : comment puis-je y remédier ?

DDD
Libérer: 2024-10-26 11:11:02
original
336 Les gens l'ont consulté

##  Why is my Android WebView behaving so poorly? Blank pages, unresponsive styles, choppy animations - how do I fix it?

Problèmes d'Android WebView : rendu vide, changements de style qui ne répondent pas et animations saccadées

Android WebView se comporte souvent de manière erratique, notamment en affichant des pages vierges, en ignorant Modifications CSS et présentation d'animations saccadées. Ces problèmes peuvent être frustrants et nuire à l’expérience utilisateur. Heureusement, il existe des solutions à ces problèmes, comme nous l'explorerons dans cette discussion.

Solution 1 : Activer l'accélération matérielle

À partir d'Android 4.4 (KitKat), le matériel l’accélération est cruciale pour améliorer les performances de WebView. Dans votre AndroidManifest.xml, activez l'accélération matérielle en ajoutant la ligne suivante dans le champ tag:

<code class="xml"><application
   ...
   android:hardwareAccelerated="true"></code>
Copier après la connexion

Solution 2 : Forcer le redessinage

Une variable booléenne finale statique dans la classe WebView permet un redessinage constant de la vue. Cela peut résoudre les changements de style qui ne répondent pas et les problèmes de rendu vierge. Cependant, l'utilisation de cette méthode draine continuellement la batterie.

Étendez la classe WebView comme indiqué ci-dessous et remplacez la méthode onDraw() :

<code class="java">import org.apache.cordova.CordovaWebView;

import android.content.Context;
import android.graphics.Canvas;

public class MyWebView extends CordovaWebView {
    public static final String TAG = "MyWebView";

    public MyWebView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Warning! This will cause the WebView to continuously be redrawn
        // and will drain the devices battery while the view is displayed!
        invalidate();
    }

}</code>
Copier après la connexion

Demandez à PhoneGap d'utiliser cette classe WebView personnalisée :

<code class="java">public void init(){
    CordovaWebView webView = new MyWebView(MainActivity.this);
    super.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}</code>
Copier après la connexion

Solution 3 : CrossWalk WebView

Pour les versions Android 4.4 et ultérieures, CrossWalk propose un remplacement instantané de WebView avec des performances et une stabilité supérieures. Plus d'informations peuvent être trouvées sur crosswalk-project.org.

Conseils supplémentaires :

  • Définissez la priorité de rendu WebView sur élevée : appView.getSettings(). setRenderPriority(RenderPriority.HIGH)
  • Activer les plugins à la demande : appView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND)
  • Utilisez la dernière API WebView et définissez l'API minimale prise en charge sur celui que vous utilisez.
  • Apply -webkit-transform: translate3d(0,0,0); à divers éléments en CSS pour améliorer les performances.
  • Utilisez une classe personnalisée qui étend WebView et remplace la méthode onDraw() par invalidate() pour forcer le redessinage uniquement lorsque cela est nécessaire.
  • Activez le wiki de la communauté pour permettre aux autres de contribuer aux optimisations de cette réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal