Bekijk je website in Mac’s Safari op een PC

Usarchy bekeken op Safari voor de MacDoor een lezer werd ik erop geattendeerd dat Usarchy er niet goed uitziet in Safari op Apple’s Mac. Dat kan natuurlijk niet op een usability weblog, dus ik probeer al een tijdje een Safari emulator te vinden. Ik wil namelijk graag mijn CSS aanpassen zodat Usarchy er in Safari ook fatsoenlijk uit ziet, maar heb zelf geen toegang tot een Apple met Mac OSX. Al zal dat niet lang meer duren, want ik vind dat ik toch eens de interface van Apple moet ervaren.

Het vinden van een programma dat Safari nadoet is echter niet makkelijk. Safari is gebaseerd op de browser engine van Konqueror, dus onder linux zou ik misschien iets kunnen testen. Dat zal ik later vandaag nog even proberen op de Gentoo bak die ik hier heb staan.

Op zoek naar een emulator of een preview tool kwam ik de site iCapture van Danvine.com tegen. Daar kun je een URL invullen, waarna iCapture er een screenshot van maakt zoals de site er in Safari uit ziet. Denk ik, want ik kan het niet testen voorlopig ๐Ÿ™‚ De tool is echter wel erg leuk uitgevoerd. Hier schrikbarende resultaat van Usarchy onder Safari.

Klachten over een lelijke lay-out in welke browser onder welk OS dan ook zijn van harte welkom! (al weet k dat er ook nog wel wat issues zijn onder IE6 voor Windows, dat schijnt ook een populaire combinatie te zijn)
Ik ben geen CSS guru, maar ik zal mijn best doen…

14 gedachten over “Bekijk je website in Mac’s Safari op een PC

  1. Anders Floor

    Da’s een mooie tip, Sander! En het valt me 100% mee. Ik had verwacht dat mijn site (nooit getest op Apple) er ook niet uit zou zien, maar het blijkt pixel-perfect ๐Ÿ™‚ (en nou niet zeggen dat dat eigenlijk nog ernstiger is)

    Like

  2. francky

    Een aardig alternatief voor browser-bezichtiging met Browsercam.com is de online Browsershots.org. Vooral ook omdat Browsercam commercieel is, en Browsershots gratis.
    Url’tje erin tikken – even wachten – en ja, deze pagina is prachtig op Safari 2.0 onder Mac OS-X. ๐Ÿ™‚

    francky

    PS:
    De kleine lettertjes op Safari zitten ‘m denkelijk in de eigenlijk te grote letters in IE op PC. Met de css-aanvulling: body { font-size: 100.1%; } zou dat te verhelpen moeten zijn. De font-sizing in em’s verderop in het stylesheet moet dan ws. wat aangepast worden, en dan zouden cross-browser min of meer dezelfde letterformaten getoond moeten worden. De 1/10 % extra is om Opera in het gareel te houden.

    Like

  3. Sander

    Mijn ervaring is dat de font-size in Firefox, Opera en IE hetzelfde is, op PC onder Windows althans. Moet er wel bijzeggen dat ik eigenlijk altijd em gebruik i.p.v. %. Wellicht dat dat uitmaakt.

    Like

  4. Ruben Timmerman Berichtauteur

    Als je je monitor DPI anders instelt (ik heb hem op 106dpi omdat ik anders scheeld word van de kleine letters) wordt je font-size in IE heel anders, maar in andere browsers niet… Nog vermoeiender ๐Ÿ™‚

    Like

  5. francky

    De scherm-resolutie wil ook aardig aantikken! Kleine letters op zich
    kan ik wel aan, maar niet: kleine letters in combinatie met v?ยฉ?ยฉl te
    lange regels (vaak het geval bij hoge reso’s).
    Breedte van de ’s aanpassen op de lettergrootte (dus ????k met
    width in em’s i.p.v. in % [van de screenwidth] ) kan lucht geven, maar
    dan komen vaak andere designproblemen om de hoek kijken.

    @Sander: idd. Ik heb hier nog een simpele testpagina zwerven.
    Kan iedereen zelf kijken (met browsershots in de aanslag voor
    browser/mac/pc verschillen).
    Extra’tje: getoonde letergroottes zijn ook nog eens afhankelijk van
    het lettertype! – De lettertypen in verschillende browsers zijn niet
    allemaal even groot: de Courier in IE is bv. een stuk groter dan de
    Courier in FF, terwijl de Arial in beide hetzelfde is…

    Dat het formaat van de systeem-letters kleiner is dan de browser-letters
    lijkt me te verklaren: als de systeemletters net zo groot zouden zijn
    als “gewone tekst” op een pagina (web-pagina, Word-pagina, enz.),
    zouden alle werkbalken bij elkaar veel te veel ruimte van het scherm
    af snoepen: minimale werkruimte!

    Wie meer wil studeren op font-size, kan zijn hart ophalen in de
    css-discuss Wiki (item: Sizing Text). *)
    Bv. alleen al de links op de pagina “How do I size fonts” zijn goed
    voor vele uurtjes leesplezier en hersengekraak! ๐Ÿ™‚

    O ja, ronde hoekjes! Heb ik toevallig ook nogal wat over in
    voorraad. Zie artikel en speeltuin
    “Liquid Round Corners”.
    (de NL-versie moet ik nog ’s updaten…)

    francky

    *) Ook goed voor allerlei andere css zaken!

    (PS: een preview voor ingetikte reacties zou mooi zijn om tikfoutjes eruit te halen enzo.)

    Like

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s