@3x Grafiken für Web

[PeperoniJeans]

Hi Leute,

ich bin kein Web-Programmierer und habe relativ wenig Ahnung was sämtliche Programmiersprachen angeht.

Auf meiner Website habe ich in der style.css folgendes definiert:

Normal

#logo {height: 100px; width: 182px; background-image: url(images/logo.png); background-position: center center; background-repeat: no-repeat;}

So weit so gut. Diesen Code habe ich für Retina-Geräte folgendermaßen definiert:

@2x

#logo {height: 100px; width: 182px; background-image: url(images/logo.png); background-image: -webkit-image-set(url(images/logo.png) 1x,url(images/[email protected]) 2x); background-size: 182px 40px; background-position: center center; background-repeat: no-repeat;}

Jetzt, nachdem das iPhone 6 + rauskam habe ich erweitert. Der Code sieht nun so aus:

@3x

#logo {height: 100px; width: 182px; background-image: url(images/logo.png); background-image: -webkit-image-set(url(images/logo.png) 1x,url(images/[email protected]) 2x); background-size: 182px 40px; background-image: -webkit-image-set(url(images/logo.png) 1x,url(images/[email protected]) 3x); background-size: 182px 40px; background-position: center center; background-repeat: no-repeat;}

Ich habe leider kein @3x-Gerät zur Verfügung um zu testen ob das Logo in dem Fall jetzt auch auf @3x-Geräten scharf angezeigt wird. Laut Code sollte er jetzt die [email protected] Grafik anzeigen, bei Geräten mit einer @3x-Auflösung. Ist das so korrekt? Konnte bisher nichts im Web finden über @3x-Grafiken im Web.