Mobilenheter utgjør allerede en stor del, om ikke flertallet, av online leserskare for mange nettsteder, så det er viktig å sørge for at nettstedet ditt vil se ut og fungere ordentlig på en iPhone eller nettbrett. Det er mange tjenester som tilbyr forhåndsvisning av mobillayout for en gitt URL, men Apple gjorde testnettsteder for mobil beredskap mye enklere med Safari 9 i OS X El Capitan. En ny funksjon kalt Responsive Design Mode kan raskt forhåndsvise hvordan et nettsted ser ut på en rekke Apple-enheter så vel som vanlige skjermoppløsninger for mobile enheter. Slik fungerer det.
Det er viktig å gjenta at Responsive Design Mode er en ny funksjon som er eksklusiv for Safari 9 i OS X El Capitan, så du må ha minst disse versjonene av nettleser og operativsystem for å få tilgang til den. Hvis Mac-en din oppfyller dette kravet, må du først aktivere Safari's Developer Mode. For å gjøre det, start Safari og klikk Safari i menylinjen. Velg deretter Innstillinger> Avansert .
I kategorien Avansert i vinduet Innstillinger for Safari, kryss av i boksen "Vis utvikle meny i menylinjen." Som navnet på alternativet tilsier, vil du se en ny "utvikle" -meny vises i Safari-menylinjen til høyre for “Bokmerker”.
Lukk deretter Safari Preferences-vinduet og naviger til et nettsted du vil teste i Responsive Design Mode. Når nettstedet er fullastet i nettleseren din, kan du bruke tastatursnarveien Command-Option-R og du vil se nettleservinduet konvertere til en forhåndsvisning av en av flere mobile enhetsoppløsninger (du kan også få tilgang til Responsive Design Mode ved å klikke på Develop i Safari-menylinjen og velg Enter Responsive Design Mode ).
Safari Responsive Design Mode lar deg forhåndsvise hvordan et nettsted ser ut på alle Apples mobile enhetsoppløsninger, fra 3, 5-tommers iPhone 4S til 12, 9-tommers iPad Pro. Brukere har også muligheten til å velge en 1x, 2x eller 3x “Retina” -oppløsning og endre nettleseragenten for å etterligne oppførselen til mest populære nettlesere som Chrome, Firefox og Edge.
For hver enhet og skjermstørrelse kan brukere klikke på enhetsikonet for å skifte mellom stående og liggende retning, eller for enheter som iPad Air og iPad Pro som støtter delt visning, kan du klikke for å rotere mellom forskjellige oppsett av delt visning.
Mens Safari Responsive Design Mode mangler noen av alternativene til lignende eksisterende verktøy, kan det å være innebygd direkte i Safari være en enorm tidsbesparelse for webdesignere, og et flott lærings- og testverktøy for nettstedseiere som ønsker å sikre at mobilbesøkende får den beste opplevelsen uansett skjermoppløsning eller størrelse.
Når du er ferdig med å teste, kan du forlate Responsive Design Mode ved enten å lukke nettleservinduet eller fanen, eller trykke på snarveien Command-Option-R igjen.
