Maison > interface Web > js tutoriel > Introduction à la solution au problème que la version iframe de layuiadmin ne peut pas s'adapter à la page système ios

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

不言
Libérer: 2018-08-25 11:24:41
original
5995 Les gens l'ont consulté

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 :
Introduction à la solution au problème que la version iframe de layuiadmin ne peut pas sadapter à la page système ios

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

Après modification :

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

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

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');
    }
Copier après la connexion

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!

Étiquettes associées:
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