pcguy
Dec 02, 2021
view2466
view6
0
Goto Top

Tool für Responsive Mobile Test

GermanQuestionWeb DevelopmentDevelopment
Hallo zusammen

Ich suche ein Tool das mich bei der Test und Fehlersuche der Mobile Webseite in Apple & Android System unterstützt.
Es soll mir helfen CSS Fehler zu finden...

Leider zeigt mir im "Firefox Tools für Webentwickler" => Bildschirmgrösse testen nicht dasselbe Ergebniss wie es live auf dem Handy aussieht?


Danke für eure Feedbacks face-smile
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 1579013518

Url: https://administrator.de/contentid/1579013518

Printed on: April 19, 2024 at 03:04 o'clock

6 Comments
Latest comment
Goto Top
Mitglied: 149569
149569 Dec 02, 2021 updated at 10:34:13 (UTC)
Goto Top
Zitat von @pcguy:
Leider zeigt mir im "Firefox Tools für Webentwickler" => Bildschirmgrösse testen nicht dasselbe Ergebniss wie es live auf dem Handy aussieht?
Das kommt auf den genutzten Browser am Mobile an, wenn du am Mobile Chrome als Browser nutzt musst du auch Chrome und nicht Firefox am Desktop zum Testen nutzen, das hat ebenfalls einen solchen Modus.
https://developer.chrome.com/docs/devtools/device-mode/#viewport
Die Rendering-Engine ist ja der Punkt der für einen Vergleich gleich sein muss, und natürlich auch der User-Agent muss stimmen.

https://www.browserstack.com/browser-emulator
https://bluetree.ai/screenfly/
https://appetize.io/
https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckej ...
https://www.lambdatest.com/browser-emulator-online
Member: pcguy
pcguy Dec 02, 2021 at 10:34:14 (UTC)
Goto Top
besten Dank!

Wenn ich auf dem PC (Win) FF das Mobilegerät simuliere ... passt es
Auf dem Android Gerät mit FF sind Div's verschoben (überbreite) ...

Es muss nicht auf jedem Gerät perfekt sein, aber sicher keine überbreite face-confused
Mitglied: 149569
149569 Dec 02, 2021 updated at 10:36:56 (UTC)
Goto Top
Glaskugel ohne vorliegenden Code
https://www.w3schools.com/css/css_rwd_viewport.asp
Member: pcguy
pcguy Dec 02, 2021 at 10:44:04 (UTC)
Goto Top
Danke face-smile

Es ist Wordpress mit einem Bootstrap:
das sollte passen => <meta name="viewport" content="width=device-width, initial-scale=1">

Bis jetzt war alles ok, jetzt haben sich einige fehler eingeschlichen ...
Mitglied: 149569
149569 Dec 02, 2021 updated at 10:57:25 (UTC)
Goto Top
Zitat von @pcguy:
Bis jetzt war alles ok, jetzt haben sich einige fehler eingeschlichen ...
Dann prüfe das was du seit dem geändert hast. Vor allem auch genutzte Einheiten und Maßangaben.
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
Für Mobile Browser gibt es auch Developer-Tools, ansonsten siehe die ergänzten Links oben.
Mitglied: 137960
137960 Dec 02, 2021 at 14:10:33 (UTC)
Goto Top
Wenn für Apple entwickelt wird, bietet sich Xcode an. Dort kann man eine Emulation beliebiger Apple-Hardware einschalten, wobei die Auflösung und Pixeldichte automatisch gesetzt wird.

Hier ein Screenshot, der exemplarisch einen Auschnitt anzeigt:
gnmpf
GermanQuestionWeb DevelopmentDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 1 CommentDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment