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