ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

ในการพัฒนาเว็บไซต์ต่าง การแสดงผลเป็นสิ่งสำคัญมาก เพราะหากการแสดงผลไม่ตรงตามที่เราออกแบบไว้ก็จะทำให้เกิดข้อผิดพลาด
ทำไห้เว็บไซต์ไม่น่าสนใจ โดยจะมาพูดถึงการเปิดเพื่อใช้งาน Responsive Design Mode เบราเซอร์ safari ใน MacOS

Safari เป็นเว็บบราวเซอร์ที่มาพร้อมกับเครื่อง Mac ถูกพัฒนาขึ้นโดยบริษัท Appleซึ่งใน Safari เวอร์ชัน 9 มีโหมด Responsive Design Modeป็นตัวช่วยนักพัฒนาเว็บ ออกแบบเว็บตามขนาดหน้าจอ การวางแนว และความละเอียดต่างๆ
ช่วยให้นักพัฒนาแน่ใจได้ว่าเว็บไซต์และแอพ รองรับอุปกรณ์และแพลตฟอร์มที่หลากหลายได้

วิธีเปิดใช้งาน สามารถทำได้ดังนี้
1.เข้า safari แล้วไปแถบเมนูด้านบนกดที่ safari แล้วเลือก Preferences

safari_setting
safari_setting

2.ใน หน้านี้จะมีตัวเลือกการตั้งค่าต่างๆหลายตัว ในสว่นนี้ให้เลือก Advanced ที่เป็นรูปฟันเฟือง

safari_setting_advanced
safari_setting_advanced

3.ก็จะเข้ามาหน้านี้ ที่ด้านล่างสุดของเมนู จะเห็น Show Develop menu in menu bar อยู่ ให้ติ๊กถูก

safari_setting_advanced_showdev
safari_setting_advanced_showdev

4.ไปที่แถบเมนูเหมือนเดิม แต่รอบนี้ ก็จะเห็นแถบเมนูมี Develop เพิ่มขึ้นมา

safari_menu_develop
safari_develop_menu

5.ให้กดที่ Develop แล้วจะมีแถบเมนูต่างๆขึ้นมาให้เลือก เลือกที่ Enter Responsive Design Mode เพื่อใช้งาน

safari_responsive_design
safari_responsive_design_mode

6.ก็จะเข้ามาหน้านี้จะมีขนาดหน้าจอต่างๆ ทั้ง iphone, ipad, macและยังมีหน้าจอของ google chrome,firefox ที่เป็นแบบ window และ mac ให้ลองใช้เพื่อดูหน้าตาของเว็บได้ อีกด้วย

responsive_mode
responsive_mode

ส่วนวิธีปิดโหมดนี้ก็ง่ายๆไปที่เมนู Develop  เหมือนเดิม ในตรงที่เดิมที่เรากดเเพื่อเปิด responsive mode จะมี exite ให้เราออกจากโหมดนี้ด้วย

 

ตัวช่วยนี้ทำให้สะดวกโดยที่เราไม่ต้องปรับขนาดหน้าจอของตัวเอง แต่ก็สามารถดูการแสดงผลของหน้าขนาดจอต่างๆรวมไปถึงเบราเซอรืที่มีการใช้งานมากอย่าง Google Chrome Firefox edge ได้ง่ายอีกด้วย โดยที่ไม่ต้องดาวน์โหลดตัวเบราเซอร์เหล่านั้นมาติดตั้งเลย

 


อ้างอิง
How to Activate and Use Responsive Design Mode in Safari.[ออนไลน์].เข้าถึงได้จาก
https://www.lifewire.com/using-responsive-design-mode-in-safari-446569

How to use Responsive Design Mode in Safari .[ออนไลน์].เข้าถึงได้จาก
https://thesweetsetup.com/use-responsive-design-mode-safari/

เปิดใช้งานเมนู Develop Menu ใน Safari .[ออนไลน์].เข้าถึงได้จาก https://tha.applersg.com/enable-develop-menu-safari

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
index subttile VDO แนะนำการใช้ CI (Continuous Integration) ใน GitLab จับโค้ดจาก git ขึ้น demo & Production อัพไฟล์
โดย Nes224 พฤ 20 ม.ค. 2022 11:46 am บอร์ด M150 - ธราวุธ ชัยศรี
2
10
พฤ 20 ม.ค. 2022 3:54 pm โดย norisa_dl
งานประจำวันที่ 20 มกราคม 2565
โดย Nes224 พฤ 20 ม.ค. 2022 8:52 am บอร์ด M150 - ธราวุธ ชัยศรี
6
41
พฤ 20 ม.ค. 2022 7:19 pm โดย norisa_dl
สิ่งควรรู้ก่อนสร้าง component ใน joomla
โดย adinan49 พ 19 ม.ค. 2022 10:17 pm บอร์ด Joomla user Guide Knowledge
0
12
พ 19 ม.ค. 2022 10:17 pm โดย adinan49
ติดตั้ง Odoo 15 แล้วเจอ ปัญหาปริ้นไม่ได้ ปริ้นไม่ออก แก้ตามนี้
โดย mindphp พ 19 ม.ค. 2022 8:32 pm บอร์ด Linux - Web Server
1
16
พ 19 ม.ค. 2022 8:32 pm โดย mindphp
เริ่มหัดเขียนโปรแกรม node.js หรือ php หรือ python ดี
โดย SharminSultana พ 19 ม.ค. 2022 3:55 pm บอร์ด Programming - PHP
2
21
พฤ 20 ม.ค. 2022 6:41 pm โดย บุคคลทั่วไป
โหลด mooziicart จากไหนดีสุด
โดย Anonymous พ 19 ม.ค. 2022 2:43 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
พ 19 ม.ค. 2022 2:43 pm โดย บุคคลทั่วไป
งานประจำวันที่ 19 มกราคม 2565
โดย Nes224 พ 19 ม.ค. 2022 8:36 am บอร์ด M150 - ธราวุธ ชัยศรี
4
49
พฤ 20 ม.ค. 2022 1:08 pm โดย norisa_dl
วิธีเขียนโค้ด JavaScript ใน Joomla ผ่านไฟล์ภายนอก
โดย adinan49 อ 18 ม.ค. 2022 11:14 pm บอร์ด Joomla user Guide Knowledge
0
21
อ 18 ม.ค. 2022 11:14 pm โดย adinan49