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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีค้นหาที่อยู่ IP บนทีวีซัมซุง

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

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

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

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