Safari - Darstellung

Riggi29 · **Riggi29** » 06.09.2015, 21:39 **Safari - Darstellung**

Hallo zusammen,

ich habe folgende Seite auf responsive Design umgestellt:

https://www.mein-bauchmuskeltraining.de/

Diese Seite wird in allen Browsern korrekt dargestellt, nur im Safari-Browser nicht. Hat jemand eine Idee, woran das liegt?

Melegrian · **Melegrian** » 08.09.2015, 10:04 **Safari - Darstellung**

Riggi29 hat geschrieben:ich habe folgende Seite auf responsive Design umgestellt:

https://www.mein-bauchmuskeltraining.de/

Du hättest gut daran getan, die zuerst auf valides HTML5 umzustellen, statt so ein Konstrukt zu verwenden:

Code: Alles auswählen

<script></script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">

Warum beginnt die nicht mit <!DOCTYPE html sondern mit einem leeren Scriptbereich?
Warum nicht valides HTML5 für responsive Seiten?

In einer Liste einen Zeilenumbruch einzufügen, geht nicht:

Code: Alles auswählen

<li><a href="http&#58;//www.mein-bauchmuskeltraining.de/faq.html" title="FAQ">FAQ</a></li>
			
<br>

<li><a href="http&#58;//www.mein-bauchmuskeltraining.de/sitemap.html" title="sitemap">Sitemap</a></li>

Wenn hättest Du den in den li-Tags mit einschließen müssen. Auch alle leeren Tags mit / wie in <br /> richtig schließen, falls es denn unbedingt XHTML sein soll:

Code: Alles auswählen

...</a><br /> &nbsp; </li>

Bei Wiederholungen würde ich statt <br /> style mit margin-top für das nachfolgende Listenelement empfehlen.

Auf Fehler reagieren die Browser halt unterschiedlich, einige bügeln die größten Knitterfalten aus, andere nicht.

Riggi29 · **Riggi29** » 08.09.2015, 20:04 **Safari - Darstellung**

Hi,

danke erstmal. Ich werd mal die Fehler beheben und schauen ob es dann funktioniert.

Ich habe folgenden Code in den sylte anweisungen:

@media (-webkit-min-device-pixel-ratio: 1.5) { /* WebKit */ }
@media (min--moz-device-pixel-ratio: 1.5) { /* Mozilla */ }
@media (-o-min-device-pixel-ratio: 3/2) { /* Opera */ }
@media (min-resolution: 1.5dppx) { /* CSS3 */ }

Muss da evtl noch was für den Safari rein?

Ich beschäftige mich noch nicht all zu lang mit media queries und CSS, ist machmal noch Neuland..

-----------------

Diese leere Script Anweisung gefällt mir da auch nicht.

IE hat die media queries nicht unterstützt, mit dieser leeren Script Anweisung funktioniert die Seite aber im IE ?!?!?

Melegrian · **Melegrian** » 08.09.2015, 21:27 **Safari - Darstellung**

device-pixel-ratio ist doch soweit ich weiß nur dafür gut, auf Retina Displays größere Images auszuliefern, falls denn größere vorhanden sind. Habe ich noch nicht benötigt, meine Images liefere ich bisher nicht größer aus als eingebunden. So wie Du das hier abbildest, hat es denke ich keine Wirkung, Du müsstest in den Klammern die URLs von den größeren Images angeben. Ein Beispiel für die Notierung findest Du hier:

https://msdn.microsoft.com/de-de/librar ... 85%29.aspx

Riggi29 · **Riggi29** » 08.09.2015, 21:57 **Safari - Darstellung**

Danke für die Info.

Dann wird der code wohl überflüssig sein.

Hast du eine Idee, warum durch die leere script Anweisung der IE die media queries richtig interpretiert?

Melegrian · **Melegrian** » 09.09.2015, 10:39 **Safari - Darstellung**

Riggi29 hat geschrieben:Hast du eine Idee, warum durch die leere script Anweisung der IE die media queries richtig interpretiert?

Nein, habe ich nicht, doch hast Du schon einmal versucht, diese Deklaration

Code: Alles auswählen

<script></script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">

einfach nur durch

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de-DE">

zu ersetzen? Das mit lang habe ich mir von einem WP-Standard-Theme so abgeschaut, einfach nur für HTML5 genügt aber auch:

Code: Alles auswählen

<!DOCTYPE html>
<html>

Ansonsten: https://wiki.selfhtml.org/wiki/HTML/Dok ... und_Aufbau

Mit welcher Version vom Safari bist Du eigentlich unterwegs?
Habe gerade einmal geschaut, seit drei Jahren scheint es keine mehr für Windows zu geben.

Riggi29 · **Riggi29** » 09.09.2015, 21:35 **Safari - Darstellung**

Hab Deine Anweisung getestet, dann funktioniert es im IE auch ohne die leere script Anweisung.

Im Safari geht es aber nicht.

Safari Version: 5.1.7. Müsste die neuste für Windows sein.

Ich spreche in dieser Datei ( https://www.mein-bauchmuskeltraining.de/responsive.css ) die verschiedenen devices und browser welche media querries nicht interpretieren an.

Kann ich denn auch direkt den Safari Browser ansprechen und dafür andere Positionierungen angeben?

Melegrian · **Melegrian** » 10.09.2015, 14:13 **Safari - Darstellung**

Riggi29 hat geschrieben:Safari Version: 5.1.7. Müsste die neuste für Windows sein.

Wenn ich das lese, so vergeht mir die Lust zum Download:

Hinweis: Safari für Windows wird von Apple nicht mehr gepflegt, neue Versionen sind derzeit nicht geplant. Wir empfehlen Ihnen, den Browser zu meiden, weil mögliche Sicherheitslücken eine große Gefahr für Ihren Rechner darstellen.

https://www.chip.de/downloads/Safari_27264736.html

Soll heißen, ich kann es nicht nachvollziehen und einen veralteten Safari werde ich mir nicht extra dafür herunterladen. Wenn aber alles valide ist, dann wäre es schon einmal ein guter Anfang, zumindest ging ich bisher davon aus. Zur Kontrolle:

https://validator.w3.org/

Gut, ob die CSS Regeln alle richtig sind, das kannst Du damit nicht prüfen, doch da begnüge ich mich bisher mit IE, FF und Chrome für Desktop und Android für Mobile, nebst unterschiedlichen Tools zur Vorschau, was ja beinahe alle Browser zu bieten haben. Nur das ich jetzt hier alle Browserversionen zu liegen hätte und noch die unterschiedlichsten mobilen Endgeräte, so ist es halt auch nicht.