Mobile enheder udgør allerede en enorm del, hvis ikke størstedelen, af online-læserskare på mange websteder, så det er vigtigt at sikre, at dit websted ser ud og fungerer korrekt på en iPhone eller tablet. Der er mange tjenester, der tilbyder forhåndsvisning af mobillayout for en given URL, men Apple gjorde testwebsteder til mobil beredskab meget lettere med Safari 9 i OS X El Capitan. En ny funktion kaldet Responsiv designtilstand kan hurtigt forhåndsvise, hvordan et websted ser ud på forskellige Apple-enheder såvel som almindelige mobilskærmopløsninger. Sådan fungerer det.
Det er vigtigt at gentage, at Responsiv designtilstand er en ny funktion, der er eksklusiv til Safari 9 i OS X El Capitan, så du bliver nødt til at køre mindst disse versioner af browser og operativsystem for at få adgang til det. Hvis din Mac opfylder dette krav, skal du først aktivere Safari's Developer Mode. For at gøre dette skal du starte Safari og klikke på Safari i menulinjen. Vælg derefter Præferencer> Avanceret .
I fanen Avanceret i Safari's indstillinger vindue skal du markere afkrydsningsfeltet "Vis udvikle menu i menulinjen." Som navnet på indstillingen indikerer, vil du se en ny "Udvikle" menu vises i Safari menulinjen til højre for ”bogmærker”.
Luk derefter vinduet Safari-indstillinger og naviger til et websted, du gerne vil teste i Responsiv designtilstand. Når webstedet er fuldt indlæst i din browser, skal du bruge tastaturgenvejen Command-Option-R, og du vil se browservinduet konverteres til en forhåndsvisning af en af flere mobile enhedsopløsninger (du kan også få adgang til Responsive Design Mode ved at klikke på Udvikle i Safari-menulinjen og vælg Enter Responsive Design Mode ).
Safari Responsive Design Mode giver dig mulighed for at se, hvordan et websted ser ud på alle Apples mobile enhedsopløsninger, fra den 3, 5-tommer iPhone 4S til den 12, 9-tommer iPad Pro. Brugere har også muligheden for at vælge en 1x, 2x eller 3x “Retina” -opløsning og ændre browseragenten for at efterligne opførslen hos de mest populære browsere som Chrome, Firefox og Edge.
For hver enhed og skærmstørrelse kan brugerne klikke på enhedsikonet for at skifte mellem stående og liggende retning, eller for enheder som iPad Air og iPad Pro, der understøtter delt visning, kan du klikke for at rotere mellem forskellige layoutvisninger.
Mens Safari Responsive Design Mode mangler nogle af mulighederne for lignende eksisterende eksisterende værktøjer, kan det at være indbygget direkte i Safari være en enorm tidsbesparelse for webdesignere, og et fantastisk lærings- og testværktøj for webstedsejere, der ønsker at sikre, at deres mobile besøgende får den bedste oplevelse uanset skærmopløsning eller størrelse.
Når du er færdig med at teste, kan du forlade Responsive Design Mode ved enten at lukke browservinduet eller fanen eller trykke på genvejen Command-Option-R igen.
