Introduction à la solution au problème que la version iframe de layuiadmin ne peut pas s'adapter à la page système ios

Le contenu de cet article est de présenter la solution au problème selon lequel la version iframe de layuiadmin ne peut pas s'adapter à la page du système iOS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous. .

La version iframe de la démo officielle de layuiadmin fonctionne bien sur Android, mais sur iOS, il y aura un problème que la page iframe ne pourra pas s'adapter.
Après diverses recherches sur Baidu et Google, j'ai finalement combiné quelques méthodes sur Internet, et il semble maintenant que ce problème ait été parfaitement résolu.
En fait, la méthode est très simple. Il suffit d'utiliser js pour déterminer le client S'il s'agit d'ios, il s'agit de limiter de force la largeur de la page iframe en fonction des paramètres d'écran obtenus.
L'effet est le suivant :
Avant modification :

Après modification :

Méthode de modification :
1 Ajoutez un identifiant au

="iosiframe ">
2. Présentez jquery et ajoutez un nouveau code js :

var ua = navigator.userAgent.toLowerCase();
    var screenwidth = window.screen.width;
    if(!/iphone|ipad|ipod/.test(ua)){
        $("#iosiframe").attr("scrolling","auto");
    }else{
        $('#iosiframe').width(screenwidth + 'px');
    }

Remarque : vous pouvez également ajouter le code ci-dessus directement à layui.js. il vous suffit d'ajouter le

Spécifiez simplement l'identifiant.

Pour être honnête, je ne peux pas me permettre layuiadmin car c'est juste pour apprendre, donc je ne peux pas me permettre la version authentique. Je viens de retirer le skin de la démo sur le site officiel, je l'ai donc testé moi-même et il n'y a aucun problème, je verrai si vous rencontrez d'autres problèmes après l'avoir testé.

Recommandations associées :

La hauteur iframe de la page parent s'adapte automatiquement à la hauteur iframe de la page enfant_html/css_WEB-ITnose

page Il peut s'adapter à la taille de l'écran du téléphone portable et les images à l'intérieur ne peuvent pas être

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!