Darstellung unter Safari iOS - wer kann helfen?
Felix Riesterer
0 0 
Gunnar Bittersmann
3 x51398
0 0 
Matthias Apsel
Darstellung unter Safari iOS - wer kann helfen?
Felix Riesterer
JürgenB
TabellenkalkLiebe Mitlesende,
ich besitze keine Apple-Hardware. Unter allen für mich erreichbaren (aktuellen) Browsern wird die von mir betreute Schulwebsite korrekt angezeigt, nur auf dem iPad der Kollegin gibt es einen Schönheitsfehler in der Darstellung (mehrfach angezeigtes Hintergrundbild). Um diesen zu debuggen habe ich mittlerweile herausgefunden, bräuchte ich eine Kombination aus iPad, Mac (oder MacBook) und passendem Verbindungskabel, damit man auf dem Mac/MacBook remote die Anzeigefehler im Browser des iPads debuggen kann.
Anscheinend gibt es Unterschiede in der Darstellung eines Safari unter MacOS im Vergleich zu iOS, sodass man nicht einfach darauf vertrauen darf, dass die Anzeige unter MacOS repräsentativ für iPhone und iPad ist.
Wer kann mir helfen und die Ursache für den Schönheitsfehler nennen? Selbstverständlich können wir uns vorher über eine monetäre Vergütung unterhalten.
Liebe Grüße,
Felix Riesterer.
-
ich besitze keine Apple-Hardware. Unter allen für mich erreichbaren (aktuellen) Browsern wird die von mir betreute Schulwebsite korrekt angezeigt, nur auf dem iPad der Kollegin gibt es einen Schönheitsfehler in der Darstellung (mehrfach angezeigtes Hintergrundbild). Um diesen zu debuggen habe ich mittlerweile herausgefunden, bräuchte ich eine Kombination aus iPad, Mac (oder MacBook) und passendem Verbindungskabel, damit man auf dem Mac/MacBook remote die Anzeigefehler im Browser des iPads debuggen kann.
Wo ist dann da das fragliche Hintergrundbild genau? Direkt auf der Startseite sehe ich keins.
-
Lieber Mitleser,
Wo ist dann da das fragliche Hintergrundbild genau? Direkt auf der Startseite sehe ich keins.
html > body > header > a
Liebe Grüße,
Felix Riesterer.
-
-
@@Felix Riesterer
Selbstverständlich können wir uns vorher über eine monetäre Vergütung unterhalten.
So groß, dass es zur Anschaffung der fehlenden Hardware reicht, wird sie nicht sein? 😉
Ist ein Wandertag zu einem Open Device Lab für euch eine Option? Stuttgart, Augsburg?
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Lieber Gunnar,
Selbstverständlich können wir uns vorher über eine monetäre Vergütung unterhalten.
So groß, dass es zur Anschaffung der fehlenden Hardware reicht, wird sie nicht sein? 😉
das wäre es mir nicht wert. Aber wenn mir nur gegen Entgelt geholfen werden sollte, hätte ich eine (aus meiner Sicht) angemessene Anerkennung inkauf genommen. Aber @x51398 war ja schon so nett, mir den entscheidenden Tipp zu geben.
Ist ein Wandertag zu einem Open Device Lab für euch eine Option? Stuttgart, Augsburg?
Meine Güte, was es nicht alles gibt! Das muss ich mir tatsächlich etwas genauer anschauen. Das wäre sicher etwas für den Informatik-Unterricht! Herzlichen Dank für den heißen Tipp!
Liebe Grüße,
Felix Riesterer.
-
-
Lieber Felix,
das seltsame Verhalten liegt daran, dass das iPad die Telefon- und Faxnummer automatisch verlinkt, also weitere "<a>"-Elemente im Header einfügt. Was zu tun ist, weißt Du nun sicher;-)
Viele Grüße Basti
-
Lieber x51398,
das seltsame Verhalten liegt daran, dass das iPad die Telefon- und Faxnummer automatisch verlinkt, also weitere "<a>"-Elemente im Header einfügt.
auf sowas muss man erst einmal kommen. Die Nummern als anklickbare Links gibt es im Footer der Seite noch einmal (Fax nicht, Fon schon).
Was zu tun ist, weißt Du nun sicher;-)
Oh yeah! Dir einen ganz herzlichen Dank! Das werde ich ausgiebig testen und wieder berichten. Einen ersten Versuch mit
a:first-of-typehabe ich schon implementiert. Reicht das schon auf Deiner Hardware?Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
Reicht das schon auf Deiner Hardware?
also ehrlich gesagt sieht es für mich sowohl auf dem Telefon als auch auf dem iPad total kaputt aus.
iPad:
iPhone:
LG,
CK-
Lieber Christian,
also ehrlich gesagt sieht es für mich sowohl auf dem Telefon als auch auf dem iPad total kaputt aus.
komisch - offensichtlich nur auf diesen Devices. Auf 'nem Mac scheint alles OK?
iPad:
Jetzt, da ich das ominöse Meta-Element mit
<meta name="format-detection" content="telephone=no">implementiert habe, sollte das nun etwas vernünftiger aussehen.Oder tut es das noch immer nicht?
iPhone:
Irgendwie stimmt da anscheinend der Bezugspunkt für absolute Positionierung nicht. Der Menü-Button rutscht zu weit nach links. In anderen Browsern scheint das besser zu klappen. Webkit scheint mir hier "kaputt" zu sein, denn der Epiphany-Browser mit Webkit-Engine fällt dabei auch aus der Rolle. Das bringt mich zu der Frage, inwiefern diese Engine noch von großer Bedeutung bleiben wird. Google hat sich mit Blink davon ja auch längst gelöst...
Dir jedenfalls auch ganz herzlichen Dank für Dein Feedback und Testen!
Liebe Grüße,
Felix Riesterer.
-
Liebe Ingrid,
Irgendwie stimmt da anscheinend der Bezugspunkt für absolute Positionierung nicht.
das ist nicht der Grund. Ich versuche im Prinzip CSS Image Replacement auf einem Button. In Epiphany konnte ich herausfinden, dass ein Button, bei dem man die Beschriftung visuell verstecken möchte, nicht wie bei anderen Browsern mittels
width: 0; overflow: hidden;auf sein per Padding in den sichtbaren Bereich gerücktes Hintergrundbild reduzieren kann, da Safari zwar den zu verbergenden Textanteil brav verbirgt, den dazu benötigten Platz aber für das Element reserviert, weshalb mein Menü-Button mit großen seitlichen Abständen platziert wird, was die restlichen Listenpunkte so weit nach rechts verdrängt, dass diese umbrechen müssen.Dagegen scheint mir momentan kein Kraut gewachsen zu sein - es sei denn, ich könnte über irgendeine Art Browser-Sniffing das visuelle Verstecken meiner Button-Beschriftung für Webkits anders lösen. Aber negative Margins via Vendor-Prefixes? Das habe ich in Epiphany erfolglos ausprobiert. Und in allen anderen Browsern führt es zu unerwünschter Darstellung. Auch auf sitepoint.com habe ich nicht die Lösung gefunden.
Liebe Grüße,
Felix Riesterer.
-
Ingrid, ich bin's nochmal.
dass ein Button, bei dem man die Beschriftung visuell verstecken möchte, nicht wie bei anderen Browsern mittels
width: 0; overflow: hidden;auf sein per Padding in den sichtbaren Bereich gerücktes Hintergrundbild reduzieren kann, da Safari zwar den zu verbergenden Textanteil brav verbirgt, den dazu benötigten Platz aber für das Element reserviertdas tut er bei einer Breite von exakt null, aber mit
width: 0.1emist sie größer null und das Verhalten sehr nahe bei der gewünschten Darstellung - und es tut den anderen Browsern nicht weh.Ist jetzt alles wie es soll?
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
jetzt musste ich doch nochmal meine Arbeitskiste raussuchen, trotz Urlaub 😉
Ist jetzt alles wie es soll?
iPad Air: Querformat sieht gut aus. Hochformat sieht immer noch kaputt aus:
iPhone: Hochformat unverändert, das Hamburger-Menü ist mitten in der Überschrift. Querformat deutlich besser, aber die Navigations-Liste (Unsere Schule, …) bricht immer noch sehr ungünstig um:
Auf 'nem Mac scheint alles OK?
Ja, sieht gut aus.
Webkit scheint mir hier "kaputt" zu sein, denn der Epiphany-Browser mit Webkit-Engine fällt dabei auch aus der Rolle. Das bringt mich zu der Frage, inwiefern diese Engine noch von großer Bedeutung bleiben wird. Google hat sich mit Blink davon ja auch längst gelöst...
Ich habe mit Safari auch schon oft Probleme gehabt, ja. Das ist ein unterirdischer Browser. Aber leider ist Apple der größte Smartphone-Hersteller der Welt, die Relevanz steht also erstmal ausser Frage.
LG,
CK-
Lieber Christian,
jetzt musste ich doch nochmal meine Arbeitskiste raussuchen, trotz Urlaub 😉
hehe. Was soll ich da sagen, der ich eigentlich Schulferien habe? Aber ganz lieben Dank für Deine Hilfe!
iPad Air: Querformat sieht gut aus.
OK.
Hochformat sieht immer noch kaputt aus:
Mir scheint, dass er das neue HTML lädt, was die Konvertierung der Telefonnummern nun verhindert, aber anscheinend benutzt er noch immer das alte CSS, denn in meinem Epiphany sieht es jetzt tatsächlich korrekt aus.
Habe jetzt intern eine Prüfung auf das Dateialter der CSS-Datei gemacht (wird bei Bedarf neu aus den Teildateien zusammengesetzt) und liefere das Dateialter als Query-String mit, damit immer die aktuelle CSS-Datei geladen wird.
Kannst Du sicher sagen, dass das korrigierte CSS geladen wird? Und sieht es dann immer noch kaputt aus?
iPhone: Hochformat unverändert, das Hamburger-Menü ist mitten in der Überschrift. Querformat deutlich besser, aber die Navigations-Liste (Unsere Schule, …) bricht immer noch sehr ungünstig um:
Das habe ich nun hoffentlich auch besser gelöst. Wenn die aktuelle CSS-Datei geladen wird.
Ich habe mit Safari auch schon oft Probleme gehabt, ja. Das ist ein unterirdischer Browser. Aber leider ist Apple der größte Smartphone-Hersteller der Welt, die Relevanz steht also erstmal ausser Frage.
seufz
Herzlichen Dank. Ich bin jetzt schon um einiges weiter in der Angelegenheit.
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
jetzt musste ich doch nochmal meine Arbeitskiste raussuchen, trotz Urlaub 😉
hehe. Was soll ich da sagen, der ich eigentlich Schulferien habe?
Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉
Aber ganz lieben Dank für Deine Hilfe!
Gerne 😀
Kannst Du sicher sagen, dass das korrigierte CSS geladen wird? Und sieht es dann immer noch kaputt aus?
Jetzt sieht es gut aus 👍
Das habe ich nun hoffentlich auch besser gelöst. Wenn die aktuelle CSS-Datei geladen wird.
Ja, sieht jetzt auch gut aus 👍
LG,
CK-
Hallo Christian Kruse,
Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉
Oder Urlaub. 😂
Bis demnächst
Matthias--
Rosen sind rot. -
Lieber Christian,
Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉
das Kultusministerium Baden-Württemberg spricht wörtlich von "Ferien". Wie sollte ich das nun nennen?
Jetzt sieht es gut aus 👍
Jetzt bin ich tatsächlich sehr erleichtert. Ganz herzlichen Dank nochmal!
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
Ich dachte, Lehrer haben nur „unterrichtsfreie Zeit?“ 😉
das Kultusministerium Baden-Württemberg spricht wörtlich von "Ferien". Wie sollte ich das nun nennen?
Ich mach doch nur Witzchen 😉
LG,
CK
-
-
-
-
-
-
-
-
-
Hallo Felix Riesterer,
Einen ersten Versuch mit
a:first-of-typehabe ich schon implementiert. Reicht das schon auf Deiner Hardware?Ich würde ja eher die automatische Verlinkung ausschalten und nur die Telefonnummern verlinken, die ich auch verlinkt haben möchte.
Bis demnächst
Matthias--
Rosen sind rot.-
Lieber Matthias,
was man bei Apple alles für'n S..... machen muss, damit deren Kram das tut, was andere ohne Extras ohnehin schon tun. Aber man liest im Internet ja, Safari sei der neue Internet-Explorer.
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
Aber man liest im Internet ja, Safari sei der neue Internet-Explorer.
Gerüchteweise ist der IE der neue Safari 😂
LG,
CK
-
-
Lieber Matthias,
dieser Link hat mir sehr viel weiter geholfen. Danke!
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix Riesterer,
dieser Link hat mir sehr viel weiter geholfen. Danke!
Gern. 😀
Auch der edge neigt übrigens zu solcherart Eigenmächtigkeit.
Bis demnächst
Matthias--
Rosen sind rot.-
Lieber Matthias,
Auch der edge neigt übrigens zu solcherart Eigenmächtigkeit.
da ich keinen Zugang zu Win10 habe, ist mir das noch nicht aufgefallen. Aber wenn dieses Meta-Element auch im Edge hilft, umso besser!
Danke!
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix Riesterer,
Aber wenn dieses Meta-Element auch im Edge hilft, umso besser!
Das wäre Wunschdenken. Für den IE heißt es
<html x-ms-format-detection="none">https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx
Bis demnächst
Matthias--
Rosen sind rot.
-
-
@@Matthias Apsel
Auch der edge neigt übrigens zu solcherart Eigenmächtigkeit.
Was ja prinzipiell auch gut so ist.
Es ist für Nutzer ärgerlich, eine Telefonnummer kopieren oder nochmals eintippen zu müssen anstatt das Gerät sie auf einen Click wählen zu lassen, weil der Entwickler vergessen hat, sie zu verlinken (oder gar nicht gewusst hat, dass es
tel:-Links gibt).(Natürlich kann es bei der automatischen Erkennung auch zu false positives kommen. Wenn die Zweierpotenzen 32 16 8 4 2 1 aufgelistet werden, wählt jeder Rosis Nummer.)
Das Ausschalten dieses durchaus nützlichen Features sollte nur mit Bedacht geschehen.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar Bittersmann,
Das Ausschalten dieses durchaus nützlichen Features sollte nur mit Bedacht geschehen.
Der Entwickler, der weiß, wie man dieses Feature ausschaltet, weiß auch, dass es
tel:-Links gibt.Bis demnächst
Matthias--
Rosen sind rot.-
Hallo Matthias,
Das Ausschalten dieses durchaus nützlichen Features sollte nur mit Bedacht geschehen.
Der Entwickler, der weiß, wie man dieses Feature ausschaltet, weiß auch, dass es
tel:-Links gibt.Äh, das halte ich in Zeiten von StackOverflow für eine ziemlich gewagte These. Ein solcher Meta-Tag ist schnell kopiert, den Sinn zu verstehen erfordert mehr Energie.
LG,
CK-
Hallo Christian,
Äh, das halte ich in Zeiten von StackOverflow für eine ziemlich gewagte These. Ein solcher Meta-Tag ist schnell kopiert, den Sinn zu verstehen erfordert mehr Energie.
das sieht man ja auch bei Fragen hier im Forum: die kompliziertesten Skripte einbauen, und dann noch nicht mal das
ifkennen. 😟Gruß
Jürgen
-
-
Hallo,
Der Entwickler, der weiß, wie man dieses Feature ausschaltet, weiß auch, dass es
tel:-Links gibt.Überschätz mir die Entwickler nicht! ;)
Gruß
Kalk
-
-
Hallo,
und wenn Felix den Hintergrund nicht an das ´<a>´ sondern an das umschließende
<header>gehängt hätte, wäre das Problem auch gar nicht aufgetreten.Gruß
Jürgen
-
-
-
-
-
-
-
Guten Morgen Felix,
auf einem Android Handy stimmt mit der Überschrift etwas nicht und ich finde der Text ist etwas schwer zu lesen, da dieser über dem Logo liegt.
-
Lieber Bernd,
danke für Deinen Hinweis. Das ist ein Kollateralschaden gewesen, den meine
:first-of-type-Ergänzung für iOS-Safari ergeben hat. Mit Matthias' Hinweis zu dem viel geeigneterenmeta-Element ist das nun nicht mehr nötig. Habe es also wieder zurück-geändert.Liebe Grüße,
Felix Riesterer.
-
-
Hallo Felix Riesterer,
im edge lässt sich das Menü nicht schließen.
Bis demnächst
Matthias--
Rosen sind rot.
