Beiträge von DetlefM

Mmh, ist ein Schritt in die richtige Richtung aber passt nicht immer.
Du kannst das am einfachsten im Chrome Browser sehen. Wenn Du da Deine Seite öffnest und mit F12 die Developer Tools aufrufst dann hast Du unter dem zweiten Icon links sowas wie "Toggle Device".
Und dann kannst Du die verschiedensten Geräte mit Deiner Website betrachten (und die Liste kann auch erweitert werden es werden nicht gleich alle angezeigt) .
Also z.B. IPhone 5 ist schon ok - obwohl auch hier der Suchbutton und die Eingabezeile viel zu klein ist. Aber bei Kindle Fire HX sieht es wirklich nicht nutzbar aus. Ich versuche mal zwei Screenshots anzuhängen.

Also "handheld" ist deprecated siehe https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Wäre also eine Sackgasse. Aber grundsätzlich sollte es schon mit eine @media abfrage im css gehen.

Danke, gerne.

Also keine Ahnung welche Werte so der Screen Test von Sailor ausgibt (ist bei mir auf dem Phone sowas wie 360x640) jedenfalls habe ich mal mit javascript gespielt und hierhttps://s3.amazonaws.com/dmone.de/test.html
einen Link hinterlegt. Source könnt ihr euch mit Rechts-Klick anzeigen lassen. Ist statisches html mit javascript.
Jedenfalls kommt da was in Richtung von HD. Etwa 178ßx945 oder so.
Beim Surfen bin ich dann noch über https://dev.opera.com/articles/css-viewport-units/ gestolpert - keine Ahnung ob das weiter hilft.
Jedenfalls, falls jemand eine simple html page hat die sich gut auf meinem Smartphone, Tablet und Desktop zeigt: Her damit. Oder halt einen Link auf ein Youtube Video, Blog oder was auch immer.

Wirf mal einen Blick auf Bootstrap. Das hier habe ich auf die Schnelle als Playground gefunden und es gibt jede Menge Videos auf youtube. Bei Bootstrap geht es von Mobile First aus und die Veränderung des Layouts von 3 zu 1 Spalten passiert automatisch. Ich bin sicher es gibt noch jede Menge anderer Bootstrap Seiten im Netz mit Tutorials, Templates usw.
https://www.bootply.com

Wie viele versuche ich "Responsiv Design" über entsprechendes CSS abzubilden.
Leider habe ich die passenden Query Parameter noch nicht gefunden. Es bezieht sich alles auf Pixel.
Meine Problemstellung:
Ich habe (von klein zu groß) ein Smartphone mit Full-HD (5,2 Zoll) , ein Tablet (HD 1280×720 8 Zoll), ein Laptop (3.000 x 2.000 13,5 Zoll) und einen Desktop Full HD 23 Zoll plus ein Smart-TV mit 4K
Trotz der hohen Pixelanzahl des 4K Gerätes brauche ich hier durch den weiten Abstand die größte Schrift und Icons. Und mit gleicher Schrift und Icon Größe für Desktop und Smartphone
wird auch keiner richtig glücklich.
Das Smartphone, das Tablet und falls ich die Tastatur abnehme auch der Laptop melden sich mit Screen only.
Also wie bekomme ich mit einer Media Query etwas sinnvolles für mein Design heraus.
Jeder Link willkommen.

Ich denke über den serverseitigen Script zu versuchen ein "responsive" Design zu erhalten ist zum Scheitern verurteilt.
Bitte nicht missverstehen, ich habe keine fertige Antwort sondern bin auch auf der Suche.
Aber ich habe in den letzten Wochen gelernt, dass Webseiten mit "Responsive Design" erstens bei Google getested werden können (Link derzeit nicht wieder gefunden) und zweitens dann auch als Button auf Android hinterlegt werden können. Also das was man will.
Das schwierige (für mich) ist zu verstehen wie ich unter css das @media richtig einsetze. Denn wie Du auch schon bei Selfhtml gefunden hast sind Pixelangaben einfach out.
Ich habe (von klein zu groß) ein Smartphone mit Full-HD (5,2 Zoll) , ein Tablet (HD 1280×720 8 Zoll), ein Laptop (3.000 x 2.000 13,5 Zoll) und einen Desktop Full HD 23 Zoll..
Wenn ich mich auf Pixel verlasse ist der Desktop identisch mit dem Smartphone und der Laptop gibt sich auch als Screen only aus wenn ich ihn als Tablet benutze.
Also brauchen wir beide eine Angabe der physischen Größe des Bildschirmes denn die Auflösung des menschlichen Auges ist nun mal nicht variabel.
Wir brauchen in etwa gleich große Buchstaben unter Berücksichtigung des Abstandes zum Display.
Wobei dann mein Smart-TV mit 4K Auflösung mit ins Spiel kommt.
Wenn Du also anfängst serverseitig das Problem zu lösen wird es aus meiner Sicht in einer Menge Code enden die nur für Deine Zwecke evtl. funktioniert.
Wenn wir dagegen CSS finden der das für uns und alle anderen mit der gleichen Problemstellung löst dann sind wir alle weiter.
Ich werde jedenfalls eine Frage mit ähnlichem Inhalt hier posten - mal sehen ob jemand was weiss.
Ein erfrischend kurzes Tutorial habe ich auf youtube gesehen

Es gibt noch viele andere aber die meisten sind lang und gehen nicht so auf den Punkt: Wie mache ich es "responsive" schnell ein.
Deutsche Tutorials sind Mangelware.Also werden wir wohl nach dem wir unser Problem gelöst haben eines machen müssen.