อุปกรณ์พกพานั้นมีผู้อ่านออนไลน์จำนวนมากหากไม่ใช่ส่วนใหญ่ของผู้อ่านออนไลน์สำหรับเว็บไซต์จำนวนมากดังนั้นการตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณจะดูและทำงานได้อย่างถูกต้องบน iPhone หรือแท็บเล็ตเป็นสิ่งสำคัญ มีบริการมากมายที่นำเสนอตัวอย่างเลย์เอาต์มือถือสำหรับ URL ที่กำหนด แต่ Apple ได้ทำการทดสอบเว็บไซต์เพื่อเตรียมความพร้อมสำหรับมือถือได้ง่ายขึ้นด้วย Safari 9 ใน OS X El Capitan ฟีเจอร์ใหม่ที่เรียกว่า Responsive Design Mode สามารถแสดงตัวอย่างได้อย่างรวดเร็วว่าเว็บไซต์มีลักษณะอย่างไรบนอุปกรณ์ต่างๆของ Apple เช่นเดียวกับความละเอียดหน้าจอมือถือทั่วไป นี่คือวิธีการทำงาน
เป็นสิ่งสำคัญที่จะต้องย้ำอีกครั้งว่า Responsive Design Mode เป็นคุณสมบัติใหม่ที่เป็นเอกสิทธิ์ของ Safari 9 ใน OS X El Capitan ดังนั้นคุณจะต้องใช้เบราว์เซอร์และระบบปฏิบัติการเวอร์ชันเหล่านี้เป็นอย่างน้อยเพื่อเข้าถึง หาก Mac ของคุณตรงตามข้อกำหนดนี้คุณจะต้องเปิดใช้งานโหมดนักพัฒนาซอฟต์แวร์ของ Safari ก่อน หากต้องการทำเช่นนั้นให้เปิด Safari แล้วคลิก Safari ในแถบเมนู จากนั้นเลือกการ ตั้งค่า> ขั้นสูง
ในแท็บขั้นสูงของหน้าต่างการตั้งค่าของ Safari ให้ทำเครื่องหมายที่ช่อง“ แสดงเมนูพัฒนาในแถบเมนู” เมื่อชื่อของตัวเลือกแสดงถึงคุณจะเห็นเมนู "พัฒนา" ใหม่ปรากฏในแถบเมนู Safari ทางด้านขวาของ “บุ๊ก.”
ถัดไปปิดหน้าต่างการตั้งค่า Safari และไปที่เว็บไซต์ที่คุณต้องการทดสอบในโหมดตอบสนองต่อการออกแบบ เมื่อเว็บไซต์โหลดเต็มในเบราว์เซอร์ของคุณให้ใช้แป้นพิมพ์ลัด Command-Option-R และคุณจะเห็นหน้าต่างเบราว์เซอร์แปลงเป็นตัวอย่างหนึ่งในความละเอียดของอุปกรณ์มือถือหลายรายการ (คุณยังสามารถเข้าถึงโหมดตอบสนองการออกแบบโดยคลิก พัฒนา แถบเมนู Safari และเลือก เข้าสู่โหมดตอบสนองการออกแบบ )
โหมดตอบสนองต่อการออกแบบของ Safari ช่วยให้คุณดูตัวอย่างว่าเว็บไซต์ดูความละเอียดของอุปกรณ์มือถือทั้งหมดของ Apple อย่างไรจาก iPhone 4S ขนาด 3.5 นิ้วไปจนถึง iPad Pro ขนาด 12.9 นิ้ว ผู้ใช้ยังมีตัวเลือกในการเลือกความละเอียด 1x, 2x หรือ 3x“ Retina” และเปลี่ยนตัวแทนเบราว์เซอร์เพื่อเลียนแบบพฤติกรรมของเบราว์เซอร์ยอดนิยมเช่น Chrome, Firefox และ Edge
สำหรับแต่ละอุปกรณ์และขนาดหน้าจอผู้ใช้สามารถคลิกที่ไอคอนอุปกรณ์เพื่อเปลี่ยนระหว่างแนวตั้งและแนวนอนหรือสำหรับอุปกรณ์เช่น iPad Air และ iPad Pro ที่รองรับมุมมองแยกคุณสามารถคลิกเพื่อหมุนระหว่างเค้าโครงมุมมองแยกต่างๆ
แม้ว่า Safari Responsive Design Mode จะไม่มีตัวเลือกบางอย่างของเครื่องมือที่มีอยู่ก่อนหน้านี้ แต่การสร้างขึ้นใน Safari โดยตรงสามารถประหยัดเวลาได้อย่างมากสำหรับนักออกแบบเว็บไซต์และเครื่องมือการเรียนรู้และทดสอบที่ยอดเยี่ยมสำหรับเจ้าของเว็บไซต์ที่ต้องการให้แน่ใจว่า ได้รับประสบการณ์ที่ดีที่สุดโดยไม่คำนึงถึงความละเอียดหน้าจอหรือขนาด
เมื่อคุณทำการทดสอบเสร็จแล้วคุณสามารถออกจากโหมดตอบสนองการออกแบบโดยการปิดหน้าต่างเบราว์เซอร์หรือแท็บหรือกดทางลัด Command-Option-R อีกครั้ง
