Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบ >> Mac

ใช้โหมด Responsive Design ของ Safari เพื่อแสดงตัวอย่างเว็บไซต์บนอุปกรณ์ทุกชนิด

นักออกแบบเว็บไซต์มากขึ้นเรื่อยๆ ที่สร้างเว็บไซต์ให้เป็น "Responsive" ซึ่งหมายถึงเว็บไซต์จะปรับตัวเพื่อแสดงเนื้อหาในรูปแบบที่เหมาะสมที่สุดสำหรับอุปกรณ์ที่คุณกำลังใช้งาน ตัวอย่างเช่น หากคุณเข้าเยี่ยมชม Macgasm บน iPhone ข้อความหัวข้อและรูปภาพบนหน้าแรกจะปรับขนาดอัตโนมัติให้เหมาะกับมือถือ หากคุณกำลังสร้างเว็บไซต์และต้องการดูลักษณะบนขนาดหน้าจอต่างๆ โหมด Responsive Design ใหม่ของ Safari ก็คือคำตอบ

วิธีเปิดใช้งานโหมด Responsive Design

เพื่อใช้งานคุณต้องใช้ OS X El Capitan และต้องเปิดใช้งานเมนู Develop ของ Safari หากยังไม่ได้เปิด ให้ไปที่ Safari > Preferences คลิกแท็บ Advanced แล้วติ๊กถูกที่กล่อง "Show Develop menu in menu bar"

ไปที่หน้าเว็บที่คุณกำลังทำงานอยู่ จากนั้นไปที่ Develop > Enter Responsive Design Mode ทันทีนี้คุณจะเห็นลักษณะหน้าเว็บบนอุปกรณ์ iOS ต่างๆ รวมถึงความละเอียดหน้าจอมาตรฐานอื่นๆ คุณสามารถปรับขนาดพื้นที่แสดงผลได้โดยวางเมาส์ที่ขอบหน้าเว็บแล้วลากซ้ายหรือขวา สลับระหว่างพื้นที่แสดงผลต่างๆ และดูว่าเว็บไซต์เปลี่ยนแปลงอย่างไรจากอุปกรณ์หนึ่งไปอีกอุปกรณ์หนึ่ง คุณอาจค้นพบบั๊กที่ไม่เคยสังเกตมาก่อน

เมื่อเสร็จสิ้น ให้ไปที่ Develop > Exit Responsive Design Mode