Mobila enheter utgör redan en enorm del, om inte majoriteten, av online-läsarekretsen för många webbplatser, så det är viktigt att se till att din webbplats ser ut och fungerar korrekt på en iPhone eller surfplatta. Det finns många tjänster som erbjuder förhandsvisningar för mobillayout för en given URL, men Apple gjorde testa webbplatser för mobil beredskap mycket lättare med Safari 9 i OS X El Capitan. En ny funktion som heter Responsive Design Mode kan snabbt förhandsgranska hur en webbplats ser ut på olika Apple-enheter samt vanliga mobilskärmupplösningar. Så här fungerar det.
Det är viktigt att upprepa att Responsive Design Mode är en ny funktion som är exklusiv för Safari 9 i OS X El Capitan, så du måste köra åtminstone dessa versioner av webbläsare och operativsystem för att få åtkomst till det. Om din Mac uppfyller detta krav måste du först aktivera Safari's Developer Mode. Starta Safari och klicka på Safari i menyraden. Välj sedan Inställningar> Avancerat .
På fliken Avancerat i Safaris inställningsfönster markerar du rutan "Visa utvecklingsmeny i menyraden." Som namnet på alternativet antyder ser du en ny "utveckla" -meny visas i Safari-menyfältet till höger om ”bokmärken”.
Stäng sedan fönstret Safari-inställningar och naviger till en webbplats som du vill testa i Responsive Design Mode. När webbplatsen är fullastad i din webbläsare använder du kortkommandot Command-Option-R så ser du webbläsarfönstret omvandlas till en förhandsgranskning av en av flera mobila enhetsupplösningar (du kan också komma åt Responsive Design Mode genom att klicka på Utveckla i Safari-menyfältet och välj Enter Responsive Design Mode ).
Med Safari Responsive Design Mode kan du förhandsgranska hur en webbplats ser ut på alla Apples mobila enhetsupplösningar, från 3, 5-tums iPhone 4S till 12, 9-tums iPad Pro. Användare har också möjlighet att välja en 1x, 2x eller 3x “Retina” -upplösning och ändra webbläsaragenten för att härma beteendet hos de mest populära webbläsarna som Chrome, Firefox och Edge.
För varje enhet och skärmstorlek kan användare klicka på enhetsikonen för att växla mellan stående och liggande orientering, eller för enheter som iPad Air och iPad Pro som stöder delad vy kan du klicka för att rotera mellan olika layoutvyer.
Medan Safari Responsive Design Mode saknar några av alternativen för liknande förutgående befintliga verktyg, kan det vara en enorm tidsbesparing för webbdesigners att ha det inbyggt direkt i Safari, och ett bra inlärnings- och testverktyg för webbplatsägare som vill se till att deras mobila besökare får den bästa upplevelsen oavsett skärmupplösning eller storlek.
När du är klar med testningen kan du lämna Responsive Design Mode genom att antingen stänga webbläsarfönstret eller fliken eller trycka på genvägen Command-Option-R igen.
