Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 28. August 2015 12:42

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Viewport oder nicht?

Hallo,

ich bin gerade dabei, ältere Seiten mit media-queries mobiltauglich zu machen. Dafür kämpfe ich mich seit Tagen durch diverse Tutorials und brauche dennoch so ein bisschen allgemeine Starthilfe, da ich noch ein wenig im Trüben fische.

Bisherige Testgeräte waren iphone4 und 5, Samsung S3 Mini und Samsung S Note 4.

Was sofort einwandfrei funktioniert hat war die Darstellung auf iphone4 und 5.
Der Wrapper und die Inhaltscontainer bekamen eine ausfüllende %-Breite, das normale Menü habe ich in der Mobilversion einfach ausgeblendet und durch ein Hamburger-Menü mit dem Toggle-Plugin ersetzt. Spalten wurden umgebrochen. Der Google-Mobilcheck war auch zufrieden.

Die verschiedenen getesteten Samsung-Androids zeigen allerdings noch immer die normale Desktop-Version. Ich habe bereits verschiedene zusätzliche Queries mit unterschiedlichen max-width und min-width, pixel-ratio etc ausprobiert. Samsung reagiert nicht.

zB

[== css ==]
@media only screen and (max-width: 400px) and (orientation : portrait) 

Aber auch andere, die angebllich passen sollen.

Als "Allheilmittel" stoße ich immer wieder auf den Viewport-Metatag und die Angabe "width: device-width". Klingt ja auch schlüssig: Breite des Gerätes.

Das hat die Androids bislang ebenfalls unbeeindruckt gelassen. Beim iphone4 dagegen wird das Layout zu zwei Dritteln abgeschnitten, was ja eher ein Rückschritt ist.

Ich trete jetzt ein wenig auf der Stelle herum. Kann man nicht einfach ab einer bestimmten Auflösung abwärts die Mobilversion einsetzen lassen? Mit vielleicht zwei bis drei Breakpoints, die dann aber die meisten Geräte abdecken?

Gruß

Beitrag geändert von antibart (28. August 2015 14:01)

Offline

#2 28. August 2015 14:20

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

antibart schrieb:

Kann man nicht einfach ab einer bestimmten Auflösung abwärts die Mobilversion einsetzen lassen? Mit vielleicht zwei bis drei Breakpoints, die dann aber die meisten Geräte abdecken?

So mach' ich das schon immer.
Zum Schluss kann man noch den ein oder anderen Feinschliff machen.

Aber zu deinem Problem: Lass doch mal das only vor screen raus!
Ich hab schon mal die Erfahrung gemacht, dass vor Allem ältere Androids oft darüber stolpern. Eigentlich müssten sie es ignorien, tun sie aber oft nicht.

Wortlaut W3C:
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Offline

#3 28. August 2015 14:31

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Oh, vielen Dank.

Das werde ich probieren. Testen kann es allerdings erst nach Feierabend, weil die Samsungs nicht meine eigenen sind.

Offline

#4 29. August 2015 12:27

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Keine Wirkung bei Samsung S3 Mini.

Würdest du mir verraten, wo und wie du die Breakpoints setzt? Ich habe mich schon quer durchs Netz gesucht und meist finde ich nur Infos, bei denen für fast jedes einzelne Habdy ein anderer Query empfohlen wird. Und auch das haut dann nicht hin.

Beitrag geändert von antibart (29. August 2015 12:40)

Offline

#5 29. August 2015 14:36

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

Ich würde die Media Queries so einfach wie nur möglich halten, und grundsätzlich unabhängig vom Device.
Der gewöhnliche User verkleinert ja bekanntlich sein Browserfenster nicht, ich aber sehr wohl, deshalb hab ich auch gerne entsprechende Anpassungen des Layouts am PC.

Ich setze Breakpoints immer abhängig vom Content und fast nie nach Auflösung eines Gerätes, also 1024px für iPad usw... Die Art des Content bestimmt, wann eine bestimmte Darstellung keinen Sinn mehr macht. Wenn du nach Geräteauflösung oder Gerätehersteller gehst findest du kein Ende mehr, und später blickt keiner mehr durch.
(Ein Kunde letztens schläft mit seinem iPad, deshalb musste ich nur für ihn die Queries speziell fürs iPad einrichten. Sonst aber nicht.)

Meine Mediaqueries sehen eigentlich immer so aus:

  @media screen and (max-width: 800px) {
   ...
  }
  @media screen and (max-width: 550px) {
   ...
  }

Offline

#6 29. August 2015 16:05

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Klenkes schrieb:

Ich würde die Media Queries so einfach wie nur möglich halten, und grundsätzlich unabhängig vom Device.

Genau das war auch mein Plan. Ab "kleines Display" soll einfach nur die einspaltige Version mit %-Breite und dem Hamburger-Menü angezeigt werden.

Setzt du denn einen Viewport?

Mein Samsung reagiert leider immer noch nicht.

Beitrag geändert von antibart (29. August 2015 16:13)

Offline

#7 29. August 2015 16:24

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

Klar. Viewport wird immer auf device-width gesetzt und initial-scale=1, so dass nicht von Anfang an eine etwaige Vergrösserung statt findet.

<meta name="viewport" content="width=device-width, initial-scale=1">

Kann man das Problem Online irgendwo sehen?

Offline

#8 29. August 2015 16:38

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Ja - temporär.

Wobei das, was du jetzt siehst, die Einstellung von dir ist. Nicht die, die ich vorher hatte und die zumindest im iphone funktionierte. Vielleicht ist mein "width: 100%"-Gedanke ja auch einfach falsch.

Der jetzige Stand ist: Sowohl beim iphone4  als auch beim Samsung greifen zwar die Queries immerhin. Es wird die MobilVersion angezeigt. Aber eben gezoomt und abgeschnitten.

Daher lass ich diese jetzt einfach drin, da sie zumindest in beiden Geräten etwa bewirkt - vielleicht sind meine CSS in den Queries ja einfach unsinnig.

Danke.

EDIT wink

URL wieder entfernt.

Beitrag geändert von antibart (29. August 2015 18:06)

Offline

#9 29. August 2015 17:23

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

Wenn ich das richtig sehe hast du nicht 100% als width für den #wrapper sondern 320px notiert (ab 599px). Mit einer border drum rum passt das im iPhone natürlich nicht mehr.

Setz doch die width auf 96%, dann ist noch ein kleiner, freundlicher Rand drum rum.

Du darfst natürlich auch nicht vergessen, so gross der Text momentan in Smartphones dargestellt wird, können Worte evtl. nicht mehr umbrechen, und der Viewport reicht dann nimmer aus.

Für Grafiken im würde ich max-width:100%; height:auto; definieren.

Dir fehlt auch noch eine Anpassung ab 1000px Breite

BTW... ich hab mich komplett davon verabschiedet, alte Seiten mobiltauglich zu machen. Die festen Breiten treiben einen in den Wahnsinn. Vor Allem wenn noch Tabellen im Spiel sind. Ich bau es lieber nach.

Beitrag geändert von Klenkes (29. August 2015 17:32)

Offline

#10 29. August 2015 18:06

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Danke für's Reinschauen.

Die 320px sind übriggebliebener Müll aus einem anderen Zwischentest. Sorry.

Wenn ich es mir jetzt nochmal ansehe, merke ich, dass das Ergebnis eigentlich okay ist.

Ich hatte in meinem ersten Versuch, der im nur iphone getestet wurde,  noch keinen Viewport gesetzt und alle Schriftgrößen nach Optik neu gesetzt - teilweise verdoppelt. Das ist natürlich jetzt obsolet.


Klenkes schrieb:

BTW... ich hab mich komplett davon verabschiedet, alte Seiten mobiltauglich zu machen. Die festen Breiten treiben einen in den Wahnsinn. Vor Allem wenn noch Tabellen im Spiel sind. Ich bau es lieber nach.

Da bin ich noch zurückhaltend. Muss man den Leuten ja auch verticken wink

Danke nachmal.

Beitrag geändert von antibart (29. August 2015 18:06)

Offline

#11 30. August 2015 22:42

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: Viewport oder nicht?

pixelangaben sind ein problem. im kommen sind "em" einheiten. siehe http://blog.cloudfour.com/the-ems-have- … eries-ftw/
in version 4 von twitter bootstrap werden EM einheiten dann auch die PX einheiten ersetzen. probier es mal damit. dann solltest du die kleinen viewports besser ansprechen können. problem ist nämlich dass das iphone auf 320px reagiert obwohl es faktisch 640px sind (einfach ausgedrückt). hat mit der retina auflösung zu tun. ein samsung handy mit der selben pixeldichte indentifiziert sich aber mit 640px statt 320px. daher hast du immer das problem mit px als media query. probier es also mal mit em!

Offline

#12 30. August 2015 14:27

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Viewport oder nicht?

Naja, so neu ist das Thema nun auch wieder nicht - siehe ein Artikel aus 2011, der auf einen Vortrag aus 2010 Bezug nimmt wink

http://www.elmastudio.de/programmierung … -geeignet/

PX to EM conversion made simple wink

http://pxtoem.com/

Offline

#13 30. August 2015 14:32

nicmare
Server-Pate
Registriert: 15. Dezember 2010
Beiträge: 1.314
Webseite

Re: Viewport oder nicht?

dass es neu ist habe ich ja auch nicht gesagt. ich sage nur dass es im kommen ist in dem sinne dass es mehr akzeptanz findet. zum beispiel durch große html frameworks wie BS. hatte mich schon seit version 2 gewundert wieso die nicht auf EMs setzen.
letzendlich geht es ja daraum antibarts problematik zu lösen.

Offline

#14 30. August 2015 15:10

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Viewport oder nicht?

nicmare schrieb:

große html frameworks wie BS. hatte mich schon seit version 2 gewundert wieso die nicht auf EMs setzen.

+1 wink

Offline

#15 31. August 2015 14:23

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

nicmare schrieb:

daher hast du immer das problem mit px als media query. probier es also mal mit em!

Danke.

Bei den Schriften etc bin ich schon auf em umgestiegen. Die queries habe ich vorsichtshalber erstmal so genommen, wie ich sie bekommen habe. Ich habe sie jetzt auf 50em (800px) bzw 36.4em (599px) umgestellt.

Fürs iphone4 scheint jetzt alles erstmal okay zu sein. Ab und zu zickt es beim drehen. Aber nicht wie beim bekannten Scalierungsbug ins Querformat, sondern in die andere Richtung. Damit kann ich aber erstmal leben.

Samsung sehe ich dann heute abend.

Beitrag geändert von antibart (31. August 2015 15:48)

Offline

#16 01. September 2015 07:31

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Bis auf eine Kleinigkeit bin ich schon zufrieden.

Wenn ich initial-scale=1 anwende, werden die Seiten (sowohl android als auch ios) beim Öffnen oder Reloaden zunächst gezoomt dargestellt und müssen manuell verkleinert werden.

Entferne ich initial-scale=1, wird es zumindest im iphone4 korrekt dargestellt -  mit einer kurzen Verzögerungszeit.

Eigentlich dachte ich immer, dass  initial-scale=1 erreichen soll, den Inhalt an das Display anzupassen (zB auch beim Kippen).

Bei mir passiert das Gegenteil. sad

Beitrag geändert von antibart (01. September 2015 08:29)

Offline

#17 01. September 2015 08:38

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

Da du die Breite der Website auf das DIV #wrapper beziehst, könnte es sein, dass das nicht geschlossen wurde.
Siehe Validator

Wenn dem tatsächlich so ist, funktionieren deine Media Queries natürlich nicht, und es wird dem Browser überlassen, zu tun, was er für richtig hält.

Des Weiteren sieht deine Angabe für width so aus: width: 96%
Da fehlt das abschließende Semikolon.

Beitrag geändert von Klenkes (01. September 2015 08:42)

Offline

#18 01. September 2015 08:48

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Oha ...

ich bin wirklich nachlässig geworden. Früher habe ich jedes Projekt mit laufendem Validator erstellt. Irgendwann wurde ich wohl etwas zu selbstsicher und habe ihn nicht mehr benutzt.

Sollte ich mir wieder angewöhnen. Besonders jetzt, wo es mit den vielen queries sher schnell unübersichtlich werden kann.

Okay, sorry. Dieser Fehler war wirklich unnötig.

Beitrag geändert von antibart (01. September 2015 08:52)

Offline

#19 01. September 2015 08:50

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.927
Webseite

Re: Viewport oder nicht?

antibart schrieb:

ich bin wirklich nachlässig geworden. Früher habe ich jedes Projekt mit laufendem Validator erstellt. Irgendwann wurde ich wohl etwas zu sicher und habe ihn nicht mehr benutzt.

Am Ende jedes Projekts ist ein Validator nie falsch.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#20 01. September 2015 08:56

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

nockenfell schrieb:

Am Ende jedes Projekts ist ein Validator nie falsch.

Jahahaha - hörst denn nicht, wie ich mir gerade selbst mit der Stirn gegen die Tischplatte schlage. wink

Hochmut kommt bekanntlich vor dem Fall ...

Offline

#21 01. September 2015 09:19

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.927
Webseite

Re: Viewport oder nicht?

smile Halb so wild. Irren ist Menschlich.


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#22 01. September 2015 09:39

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

Ach! Ich kenn das nur zu gut.
Ab einer gewissen Zeit an einem Problem wird man komplett betriebsblind. Da braucht nur ein Unbeteiligter drauf zu schauen, und der sieht sofort die Fehler. So kann man auch seine eigenen Texte nicht korrekturlesen.
Unser Hiirn sieht was es sehen will!

Offline

#23 01. September 2015 09:59

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Ich muss mir wieder angewöhnen, pedantischer zu sein. Da waren auch noch einige Kommata statt Semicola drin, weswegen ich dann viele globale Eigenschaften überflüssigerweise auf einzelne divs angewandt habe. Da muss ich noch mal aufräumen.

Bis vor gar nicht allzu langer Zeit habe ich noch jede Seite auf Browserkompatibilität bis IE6 abwärts getestet. Mittlerweile guck ich nur noch jenseits meines STandardbrowsers, wenn irgendwas merkwürdig erscheint.

Auf jeden Fall danke.  Damit scheinen zunächst alle Probleme behoben. Android muss ich wie immer später noch mal gucken. Daher markiere ich den Thread noch nicht als gelöst.

Offline

#24 01. September 2015 10:08

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.437

Re: Viewport oder nicht?

antibart schrieb:

Android muss ich wie immer später noch mal gucken. Daher markiere ich den Thread noch nicht als gelöst.

Ich hab hier ein Billigtablet liegen, Samsung 7 Zoll 800x600px. Da sieht es Quer bei 800px gut aus, aber Hochkant bei 600px ist der Text im Content und Text im Mobilmenü winzigst.
Die Darstellung selbst ist okay.

Offline

#25 01. September 2015 10:10

antibart
Server-Pate
Registriert: 14. Dezember 2010
Beiträge: 876

Re: Viewport oder nicht?

Jetzt besser?

Ich hatte bei dem einen Querie noch font-size: 0.3em drinstehen. Wieder mal so ein Überbleibsel aus diversen Tests.

Beitrag geändert von antibart (01. September 2015 10:58)

Offline