วิธีดูเวอร์ชันมือถือของเว็บไซต์บนพีซี

หากคุณเป็นนักพัฒนาเว็บหรือเป็นเจ้าของธุรกิจออนไลน์ คุณอาจอยากรู้ว่าไซต์บนมือถือมีลักษณะอย่างไรบนเดสก์ท็อป ลักษณะที่ปรากฏและการทำงานของไซต์บนมือถือของคุณอาจมีความสำคัญ เนื่องจากปริมาณการใช้อินเทอร์เน็ตมากกว่าครึ่งมาจากโทรศัพท์ ลูกค้ามีแนวโน้มที่จะอยู่ในไซต์นานขึ้นหรือซื้อบางอย่างหากดึงดูดสายตา มุมมองเดสก์ท็อปยังช่วยให้คุณแก้ไขและแก้ไขปัญหาที่เป็นไปได้ได้เร็วขึ้น

โชคดีที่นี่เป็นกระบวนการที่ค่อนข้างตรงไปตรงมา ในบทความนี้ เราจะแสดงวิธีดูเว็บไซต์เวอร์ชันมือถือบนอุปกรณ์และเบราว์เซอร์ต่างๆ

วิธีดูเวอร์ชันมือถือของเว็บไซต์ใน Chrome บน Mac

ใน Chrome คุณสามารถทดสอบส่วนหน้าและดูว่าส่วนประกอบทั้งหมดของเว็บไซต์ทำงานได้อย่างถูกต้องหรือไม่โดยใช้เครื่องมือสำหรับนักพัฒนาในตัวที่เรียกว่า DevTools เนื่องจากมีตัวเลือกอุปกรณ์ที่กำหนดไว้ล่วงหน้า DevTools จึงเป็นวิธีที่ยอดเยี่ยมที่สุดสำหรับนักพัฒนาในการเปลี่ยนมุมมองจากเดสก์ท็อปไปยังอุปกรณ์เคลื่อนที่และในทางกลับกันอย่างรวดเร็วโดยไม่ต้องมีส่วนขยายสำหรับนักพัฒนา

คุณยังสามารถเปลี่ยนขนาดหน้าจอให้เหมาะกับความต้องการของคุณ และปรับความกว้างและความสูงของหน้าจอเพื่อดูว่าเว็บไซต์ของคุณจะมีลักษณะอย่างไรในหน้าจอขนาดต่างๆ หากต้องการดำเนินการดังกล่าวบน Mac ให้ทำตามขั้นตอนเหล่านี้:

1. เปิดเบราว์เซอร์ Google Chrome และไปที่ไซต์ที่คุณต้องการดู
   
2. กด F12 บนแป้นพิมพ์เพื่อเข้าถึง DevTools
   
3. เมื่อโหมดเปิดอยู่ ให้คลิกไอคอน "สลับการจำลองอุปกรณ์"
   
4. คุณสามารถเลือกจากรายการอุปกรณ์ iOS และ Android เพื่อเลียนแบบได้
   
5. มันจะแสดงเว็บไซต์ในรูปแบบมือถือที่คุณเลือก
   

เมื่อดำเนินการเสร็จแล้ว ให้ปิดหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อปิดเว็บไซต์เวอร์ชันมือถือ

วิธีดูเวอร์ชันมือถือของเว็บไซต์ใน Chrome บนพีซีที่ใช้ Windows

หากคุณต้องการดูเว็บไซต์เวอร์ชันมือถือบนพีซีที่ใช้ Windows ใน Chrome กระบวนการที่คล้ายกันก็ค่อนข้างดี:

1. เปิดเบราว์เซอร์ Chrome
   
2. ใน Chrome ให้ไปที่เว็บไซต์ที่คุณต้องการดูในเวอร์ชันมือถือ
3. คลิกขวาที่หน้าเว็บแล้วเลือก "ตรวจสอบ" จากเมนู
   
4. หากต้องการไปที่เครื่องมือสำหรับนักพัฒนา ให้คลิกแท็บ "เครื่องมือเพิ่มเติม" แล้วเลือก "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" หรือกด F12 เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
   
5. หน้าต่างเครื่องมือสำหรับนักพัฒนาจะเปิดขึ้น
6. คลิกไอคอนสลับอุปกรณ์เพื่อเปลี่ยนเป็นโหมดมุมมองไซต์บนมือถือ
   
7. เลือกอุปกรณ์มือถือที่คุณต้องการเลียนแบบ (ไม่บังคับ)
   
8. ตอนนี้คุณสามารถปรับขนาดของหน้าจอให้เหมาะกับความต้องการของคุณได้แล้ว

วิธีดูเวอร์ชันมือถือของเว็บไซต์ใน Chrome บน Chromebook

การเข้าถึงเว็บไซต์เวอร์ชันมือถือใน Chrome โดยใช้ Chromebook นั้นคล้ายกับสองวิธีแรกมาก

1. เปิดเว็บเบราว์เซอร์ Google Chrome
   
2. เปิดหน้าเว็บที่คุณต้องการเข้าถึงบนอุปกรณ์มือถือของคุณ
   
3. ในการเข้าถึงเมนู ให้คลิกที่ไอคอนจุดสามจุดในแนวตั้ง
   
4. ลากเมาส์ไปที่รายการเครื่องมือเพิ่มเติมในรายการ
   
5. เลือก “เครื่องมือสำหรับนักพัฒนา”
   
6. หน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์จะเปิดขึ้น
   
7. สลับโหมดมุมมองเว็บไซต์บนมือถือโดยคลิกไอคอนสลับอุปกรณ์
   

สิ่งนี้จะแสดงส่วนต่อประสานผู้ใช้สำหรับไซต์มือถือ คุณยังสามารถเลือกประสบการณ์การใช้งานอุปกรณ์ที่ต้องการได้โดยเลือกยี่ห้อและรุ่นจากช่องแบบเลื่อนลง หน้าเว็บจะรีเฟรชเป็นไซต์เดสก์ท็อปทุกครั้งที่คุณปิดคอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

วิธีดูเวอร์ชันมือถือของเว็บไซต์ใน Firefox บน Mac

คุณสามารถใช้เว็บเบราว์เซอร์อื่นๆ เช่น Firefox เพื่อดูเว็บไซต์บนมือถือบนเดสก์ท็อป Mac การปรับขนาดหน้าต่างเบราว์เซอร์เป็นหนึ่งในวิธีที่นักพัฒนาเว็บส่วนใหญ่ใช้ในการประเมินเว็บไซต์การออกแบบที่ตอบสนอง อย่างไรก็ตาม ส่วนใหญ่แล้ว ทางเลือกนี้จะไม่เป็นที่ยอมรับ

นั่นคือจุดที่ความสามารถในการพัฒนาเว็บไซต์ของเบราว์เซอร์ Firefox มีประโยชน์ คุณสามารถเรียกดูหน้าเว็บของคุณด้วยความละเอียดที่หลากหลาย หากคุณรู้วิธีเข้าถึงเว็บไซต์เวอร์ชันมือถือใน Firefox ทำตามขั้นตอนเหล่านี้:

1. เปิดเว็บไซต์เวอร์ชันมือถือที่คุณต้องการดู
2. คลิกขวาที่หน้าเว็บแล้วเลือกตัวเลือก "ตรวจสอบ" จากเมนู
   
3. เลือก “โหมดการออกแบบที่ตอบสนอง”
   
4. เลือกขนาดหน้าจอของเว็บไซต์
   

วิธีดูเวอร์ชันมือถือของเว็บไซต์ใน Firefox บนพีซี Windows

พีซีที่ใช้ Windows ยังมีตัวเลือกในการดูเว็บไซต์เวอร์ชันมือถือโดยใช้ Firefox นี่คือวิธีการ:

1. เริ่ม Firefox บนพีซีของคุณ
   
2. ไปที่เว็บไซต์ที่คุณต้องการดูเป็นเวอร์ชันสำหรับมือถือ
   
3. ไปที่ “การตั้งค่า” โดยคลิกไอคอนสามแถบแนวนอน
   
4. คุณจะเห็นเมนูแบบเลื่อนลงซึ่งคุณจะต้องเลือกตัวเลือก "นักพัฒนาเว็บ"
   
5. เลือก “โหมดการออกแบบที่ตอบสนอง”
   
6. สุดท้าย คุณสามารถเลือกรุ่นสมาร์ทโฟนเพื่อดูว่าไซต์ของคุณจะปรากฏบนอุปกรณ์นั้นอย่างไร
   

วิธีดูเวอร์ชันมือถือของเว็บไซต์ใน Safari บน Mac

เราได้กล่าวถึงวิธีการดูเว็บไซต์บนมือถือบนเดสก์ท็อปโดยใช้ Chrome และ Firefox แต่เบราว์เซอร์เริ่มต้นที่มาพร้อมกับอุปกรณ์ Mac, Safari ล่ะ? โชคดีที่คุณสามารถดูเว็บไซต์เวอร์ชันมือถือใน Safari ได้เช่นกัน

1. เปิดเบราว์เซอร์ Safari
   
2. ไปที่เว็บไซต์ที่คุณต้องการดูเป็นเวอร์ชันสำหรับมือถือ
   
3. คลิกที่ "ตัวเลือก" จากนั้นในเมนู "พัฒนา"
   
4. จากเมนูแบบเลื่อนลง เลือก "เข้าสู่โหมดการออกแบบที่ตอบสนอง"
   
5. ขณะนี้คุณสามารถดูเว็บไซต์เวอร์ชันมือถือได้แล้ว
   

คำถามที่พบบ่อยเพิ่มเติม

ฉันสามารถดูเวอร์ชันเดสก์ท็อปของเว็บไซต์บนโทรศัพท์ของฉันได้หรือไม่

คำตอบคือใช่! คุณสามารถเปลี่ยนจากรุ่นมือถือเป็นรุ่นเดสก์ท็อปเพื่อตรวจสอบโดยไม่ต้องใช้คอมพิวเตอร์ ขั้นตอนในการเปลี่ยนเวอร์ชันมือถือเป็นเวอร์ชันเดสก์ท็อปใน Chrome มีดังนี้:

1. ไปที่เว็บไซต์ที่คุณต้องการดูในมุมมองเดสก์ท็อป

2. แตะที่ไอคอนสามจุดเพื่อเข้าสู่เมนู

3. เลือกตัวเลือก "มุมมองเดสก์ท็อป" ทันที

โปรดทราบว่าขั้นตอนเหล่านี้อาจแตกต่างกันไปขึ้นอยู่กับโทรศัพท์ที่คุณใช้

ทำให้การออกแบบเว็บบนมือถือง่ายขึ้น

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

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

คุณเคยลองดูไซต์เวอร์ชันมือถือบนเดสก์ท็อปของคุณหรือไม่ คุณต้องการใช้เบราว์เซอร์ใดในการทำเช่นนั้น แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง