8
votes

Élément fixe hors écran sur mobile

Je développe un widget qui pourrait être intégré à la page comme une iframe (iframe sera injecté et stylé via JavaScript). Iframe doit être placé dans le coin inférieur droit. Je ne peux contrôler que le style d'un iframe.

J'ai créé la page de démonstration suivante qui démontre le problème de la page d'hôte de test: p>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Hello world!</title>
        <meta name="viewport" content="width=device-width"/>
    </head>
    <body>
        <p id="greeting" style="width:1000px">Loading...</p>
         <iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
    </body>
</html>

html css mobile

3 commentaires

Pouvez-vous fournir un nom du périphérique mobile dans lequel l'iframe n'est pas visible? Je voudrais aussi vérifier aussi

@PhilipDomingo: J'ai mis à jour la question ci-dessus.

Qu'en est-il d'intégrer votre widget sur </ code> dans la page propriétaire?</p> <hr> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <p class="mt-4 font-weight-bold">4 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Basé à partir de mon enquête, la zone grise qui apparaît dans l'émulateur de chrome est causée par le style de la balise HTML paragraphe: <pr> xxx pré> <p> Je crois que la zone grise apparaît parce que vous avez Un style de <code> largeur: 1000px code> dans l'endroit où la taille totale de l'émulateur, <forte> galaxy S3 forte> par exemple, n'a qu'une largeur maximale de 360px. Mais si vous supprimez la largeur <code>: 1000px code> style dans l'élément de paragraphe, vous pouvez voir que le cadre est correctement affiché dans le coin inférieur droit de l'écran. P> <p> Vous pouvez vérifier Il avec l'échantillon ci-dessous: p> </p><p> p> </p><div class="Snippet" data-lang="JS" data-hide-hide="False" data-console="True" data-babel=" faux "> <div class="code d'extraction"> <pre><!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Hello world!</title> <meta name="viewport" content="width=device-width"/> </head> <body> <p id="greeting" style="width: 100px">Loading...</p> <iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe> </body> </html></pre></div></div></code></forte></code></p></pr></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">3 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Salut, merci mais ça ne m'ade pas beaucoup. Quand j'ai préparé cet exemple, j'ai aussi remarqué cela. Le problème est que (comme je l'ai déjà dit), que je ne peux pas changer la page principale, car je ne suis pas propriétaire de la page -> Je ne développe qu'un widget qui sera intégré à la page via iframe (et JS) . </p> <hr> <p class="answer-comment"> J'ai aussi essayé une autre chose. Sur cet exemple, j'ai supprimé mon iframe et mon widget de Zopim (Chat en ligne) intégré, qui utilise également un positionnement fixe. Et cela ne fonctionne pas non plus (sa cache dans la zone grise). Si je supprime soit la balise META (Viewport) ou la largeur du paragraphe que visible. Il semble que cette combinaison cause des problèmes -> D'autre part, il est évident que la conception réactive et la largeur fixe n'est pas la voie à suivre. Donc, la question est la suivante: est-il possible de surmonter ce problème sans modifier la page du propriétaire ou non? </p> <hr> <p class="answer-comment"> Intéressant! La balise Meta associée à la largeur du paragraphe semble rendre le corps à l'échelle. Mais l'élément fixe est toujours fixé dans toute la fenêtre. Donc, sa position est hors du corps. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Je n'ai pas essayé cela, mais si - au lieu de définir la position comme `bas: 5%; Droite: 5% - Vous calculez la position en haut à gauche en fonction de la largeur de la fenêtre et de la taille de la fenêtre. Quelque chose comme: <pré> xxx </ pré> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <code> 1000px code> largeur a été donné à <code> #greeting code>, c'est pourquoi l'élément hors de votre largeur mobile, vous pouvez simplement résoudre ce problème comme à l'aide de requêtes multimédias. <code> 992 Largeur Code> Démarrage de la vue Portrait des périphériques <p> P> </p><div classe="Snippet" data-lang="JS" data-hide-hide="False" data-console="vrai" data-babel="False"> <div class="code d'extraction"> <pre><!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Hello world!</title> <meta name="viewport" content="width=device-width"/> </head> <body> <p id="greeting" style="width:1000px">Loading...</p> <iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe> </body> </html></pre></div></div></code></code></code></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Comme je l'ai déjà dit, je ne développe que le widget (un iframe), donc je n'ai donc pas accès ni je ne peux pas modifier la page mère. Il semble que cette page particulière soit un peu "impair" - il a une étiquette de visualisation pour la conception réactive, mais elle n'est pas réactive (largeurs fixes). Comme je l'ai enquêté, il n'est pas possible de résoudre mon problème sans changer la mise en page / CSS de la page mère (que je ne peux pas), le propriétaire d'une page devra résoudre ce problème (s'il souhaiterait avoir notre widget). J'accepterai cette réponse même si cela ne résout pas mon problème, mais je saurai comment soutenir ce type de problèmes. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> voir <forte> <a href="http://miipro.com/test.htm" rel="nofollow Noreferrer"> Cette démonstration dans votre mobile </a> forte> <p> <forte> Changement: - strong> p> <p> Ajouter un style suivant pour gérer le navigateur mobile P> </p><p> </p><p> <fort> Raison: - strong> p> <p> Le mobile rend le HTML En mode compatible mobile qui injecte son propre style aux éléments de largeur supérieurs. C'est pourquoi la page fonctionne de manière inattendue en mode compatible mobile. Si vous le gérez dans votre HTML lui-même, il laisse le style de votre page comment vous aviez l'intention de voir. p> </p><p> C'est pourquoi si vous cliquez sur <code> Demander le site de bureau Code> dans Chrome Réglage de votre code elle-même fonctionne bien p> <pr> xxx pré> <p> p> </p><div mask="snippet" data-lang="js" data-hide-hide="false" data-console="vrai" data-babel="False"> <div class="code d'extraction"> <pre><html> <head> <meta charset="UTF-8"/> <title>Hello world!</title> <meta name="viewport" content="width=device-width"/> <style> /* mobile phone */ @media all and (max-width: 768px) { #greeting { width:100% !important; } } </style> </head> <body> <p id="greeting" style="width:1000px">Loading...</p> <iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: tranparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe> </body> </html></pre></div></div></pr></code></p></fort></p></forte></p></forte></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0">

Articles qui pourrait vous intéresser :


                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO                        
                        
                                            
                            Select2 ne s'affiche pas correctement dans le mode bootstrap                        
                        
                                            
                            Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?                        
                        
                                            
                            Comment puis-je définir un format pour les nombres d'entrée dans Blazor



        
            
            
        

    
    
        
            © 2020 www.devfaq.fr - Licensed under  cc by-sa 3.0   with  attribution required.