Fester Element außerhalb des Bildschirms auf dem Handy
Ich entwickle ein Widget, das in die Seite als iframe eingebettet werden kann (iframe wird über Javascript injiziert und gestylt). Iframe sollte in der unteren rechten Ecke platziert werden. Ich kann nur den Stil eines Iframes steuern.
Ich habe folgende Demo-Seite erstellt, die das Problem auf der Test-Host-Seite demonstriert:
Auf dem Desktop-Browser funktioniert dieser Code gut, aber auf einigen Mobilgeräten ist der Iframe nicht auf dem Bildschirm sichtbar. Wenn ich versuche, ein Element hervorzuheben, das auf einem grauen Bereich platziert ist.
Warum passiert das und wie kann ich einen Iframe so gestalten, dass er in der unteren rechten Ecke platziert wird?
Bearbeiten: Dies ist ein Screenshot der Galaxy S3-Emulation (Chrome). Iframe ist im grauen Bereich unsichtbar. Ich denke, es ist das Gleiche auf physischen Nexus 5X Gerät.
Vielen Dank!
4 Antworten
1000px width wurde #greeting zugewiesen, deshalb können Sie das Element außerhalb Ihrer mobilen Breite einfach mit Medienabfragen korrigieren. 992 width startet die Hochformatansicht von Geräten
Aufgrund meiner Untersuchung wird der graue Bereich, der im Chrome-Emulator angezeigt wird, durch den Stil des Absatz-HTML-Tags verursacht:
%Vor% Ich glaube, der graue Bereich wird angezeigt, weil Sie einen Stil von width:1000px haben, wobei die Gesamtgröße des Emulators, zum Beispiel Galaxy S3 , nur eine maximale Breite von 360 px hat. Wenn Sie jedoch den width: 1000px -Stil im Absatzelement entfernen, können Sie sehen, dass der Rahmen in der unteren rechten Ecke des Bildschirms ordnungsgemäß angezeigt wird.
Sie können es mit dem folgenden Beispiel überprüfen:
Sehen Sie DIESE DEMO IN IHREM MOBIL
Änderung: -
Fügen Sie den folgenden Stil hinzu, um den mobilen Browser zu verwalten
Grund: -
Das mobile Gerät rendert den HTML-Code im mobilkompatiblen Modus, der den Elementen mit der höheren Breite einen eigenen Stil hinzufügt. Daher funktioniert die Seite im mobilen kompatiblen Modus in einer nicht beabsichtigten Weise. Wenn Sie es in Ihrem HTML selbst behandeln, dann verlässt es den Stil Ihrer Seite, wie Sie es sehen wollten.
Das ist der Grund, warum wenn Sie in Chrome auf Request desktop site klicken, funktioniert Ihr Code selbst einwandfrei