49

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

คุณจะเปิดมุมมองมือถือของเว็บไซต์จากเบราว์เซอร์เดสก์ท็อปได้อย่างไร

browser

— Flimm
แหล่งที่มา

23

"เนื่องจากเราอยู่ในโลกมือถือเป็นครั้งแรก"ว้าวมีสักครู่ ... บริบทสำหรับกษัตริย์

— การแข่งขัน Lightness กับโมนิก้า

3

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

— BruceWayne

1

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

— Salman

1

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

— Mentalist

2

@ Mentalist ฉันหมายถึงคนที่ทำงานกับเว็บไซต์และสื่อสังคมออนไลน์

— Flimm

91

Firefox:

ใน Windows / Linux กดCtrl+ Shift+M
ใน macOS กดoption+ command+M

คุณยังสามารถค้นหารายการเมนูภายใต้ ("เครื่องมือ"), "นักพัฒนาเว็บ", "โหมดตอบสนองต่อการออกแบบ"

โครเมียม:

คุณต้องเปิด "เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์" ก่อน:

ใน Windows / Linux กดCtrl+ Shift+ Iหรือเพียงแค่F12
ใน macOS กดoption+ command+I

เมื่อเครื่องมือของนักพัฒนาซอฟต์แวร์เปิดและเน้นคุณสามารถเปิดแถบเครื่องมืออุปกรณ์

ใน Windows / Linux กดCtrl+ Shift+M
ใน macOS กดcommand+ shift+M

นอกจากนี้คุณยังสามารถค้นหารายการเมนูโดยการเปิดเครื่องมือสำหรับนักพัฒนา ("เครื่องมือเพิ่มเติม", "เครื่องมือ Develepor") จากนั้นคลิกไอคอนที่ดูเหมือนโทรศัพท์มือถือหน้าโต๊ะ "แถบเครื่องมืออุปกรณ์สลับ"

Safari:

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

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

ขอบ:

กดF12เพื่อเปิดเครื่องมือสำหรับนักพัฒนาแล้วกดCtrl+ 7เพื่อเปิด "แท็บการจำลอง" กำหนดค่าอุปกรณ์ที่คุณต้องการจำลอง

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

— Flimm
แหล่งที่มา

1

โปรดทราบว่า ctrl shift M ใช้งานได้เฉพาะเมื่อเครื่องมือสำหรับนักพัฒนาเปิดอยู่แล้ว

— Naramsim

3

@Naramsim ขอบคุณ สิ่งนี้ใช้ได้กับ Chrome เท่านั้น ฉันแก้ไขคำตอบของฉันแล้ว

— Flimm

3

สำหรับ Windows / Chrome, F12 เป็นวิธีที่ง่ายกว่าในการเข้าถึง Dev Tools ... แม้ว่าการกดแป้นครั้งต่อไปจะเป็น Ctrl-Shift-M ฉันคิดว่าการเริ่มต้นด้วย Ctrl-Shift-I อาจมีเหตุผลมากกว่า

— sǝɯɐſ

ฉันเชื่อว่า Safari Cmd + Shift + R รุ่นก่อนหน้าจะเปิดโหมดการออกแบบที่ตอบสนองได้ ดูเหมือนว่าจะไม่มีอยู่ในรุ่นล่าสุดเว้นแต่คุณจะผูกด้วยตนเอง

— Downgoat

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

— Pieter De Bie

11

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

หรือกับ Firefox:

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

— Shobhit Garg
แหล่งที่มา

1

ส่วนแรกของซอฟต์แวร์อ้างอิงถึงอะไร?

— Kamil Maciorowski

@KamilMaciorowski DevTools เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่พบใน Chrome และ Opera

— OptimusCrime

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

— Shobhit Garg

@Shobbit Garg เป็นหน้าต่างที่เปิดเมื่อฉันกด CTRL + Shift + C หรือไม่

— daniel.neumann

@ daniel.neumann น่าเสียดายที่ฉันใช้ mac ดังนั้นฉันจึงไม่สามารถทดสอบและดูว่าเกิดอะไรขึ้นเมื่อคุณกดปุ่มเหล่านั้น แต่อ้างอิงถึงทางลัดที่ระบุไว้ด้านบนหน้าต่างนี้ควรเปิดโดยกด "ctrl + shift + I" บนโครม "ctrl + shift + M" บน firefox หรือกด f12 บน IE / Edge

— Shobhit Garg

2

สำหรับวัตถุประสงค์ในการทดสอบฉันใช้เว็บไซต์ต่อไปนี้: -

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

— 23nigam
แหล่งที่มา

1

เพิ่มส่วนขยาย "user agent switcher" ในเบราว์เซอร์ของคุณและระบุตัวแทนผู้ใช้โทรศัพท์มือถือ หากเว็บไซต์นั้นฉลาดพอที่จะให้บริการเวอร์ชั่นที่เหมาะกับมือถือของคุณ

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

— ซัลมาน
แหล่งที่มา

1

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

— PiX06

เครื่องมือของเบราว์เซอร์ส่วนใหญ่ที่ให้มุมมองอุปกรณ์พกพายังช่วยให้คุณตั้งค่าตัวแทนผู้ใช้ในเวลาเดียวกัน

— Flimm

1

@ PiX06 ดังนั้นไม่จำเป็นต้องใช้ความพยายาม เพียงปรับขนาดหน้าต่างเบราว์เซอร์!

— ซัลมาน

น่าเสียดายที่ฉันพบว่าตัวเองมีคำถามมากมาย: ถ้าฉันปรับขนาดหน้าต่างเบราว์เซอร์แล้วทำไมฉันต้องกังวลกับตัวแทนผู้ใช้ ฉันควรปรับขนาดของหน้าต่างขนาดใด ฉันจะวัดหน้าต่างได้อย่างไร

— Mathieu K.

0

คำตอบข้างต้นนั้นยอดเยี่ยมสำหรับผู้ที่ต้องการใช้งานกับเบราว์เซอร์เดียวหรือมี "พื้นที่ทำงาน" บนเดสก์ท็อป จำกัด (เช่นหน้าจอเดียวที่มีความละเอียดต่ำกว่า 21 "ที่ความละเอียดต่ำ)

จริงๆแล้วมันมีทางออกที่น่าสนใจยิ่งกว่าที่ฉันค้นพบเมื่อเร็ว ๆ นี้: https://blisk.io/

ฉันจะละเว้นจากการใช้ "ลิงค์พันธมิตร" เพื่อผลประโยชน์ส่วนตัวใด ๆ (มี "ระบบที่ใช้โทเค็น" ที่คุณสามารถรับเครดิตเพื่อรับสิ่งต่างๆเช่น "พื้นที่ว่างบนคลาวด์ของทีม" ฟรีและ "คุณสมบัติพิเศษ" เพื่อใช้กับ มัน) แต่จริง ๆ แล้ว Blisk เป็นคนค่อนข้างงุนงง

"เบราว์เซอร์ที่สร้างขึ้นเพื่อการพัฒนา" ซึ่งใช้ Chromium นี้มีวิธีมากมายในการสาธิตหน้าเว็บในอุปกรณ์ต่าง ๆ ด้วย "บานหน้าต่าง" แนวตั้งทางด้านซ้ายเหมือนที่คุณเห็นเครื่องมือนักพัฒนาของ Chrome เริ่มต้นที่คอลัมน์แนวตั้งด้านขวา

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

การเปิดเผยอย่างเต็มรูปแบบ: มี "ขีด จำกัด เวลา" ที่น่ารำคาญอย่างมากต่อวันในส่วนแสดงตัวอย่างมือถือ (สลับเปิด / ปิดจากไอคอนทางด้านขวาของแถบที่อยู่ - เปลี่ยน "การแสดงตัวอย่างอุปกรณ์" จากลิงค์เล็กไปสู่ เมนูที่มุมบนขวา "แสดงรายการอุปกรณ์")

BliskDemoScreenshot

นอกจากนี้: ฉันได้พบกลอุบายที่ยอดเยี่ยมเล็กน้อยด้วยส่วนขยายเบราว์เซอร์เช่น "User-Agent Switcher" 2 ตัวที่แตกต่างจาก Chrome / Firefox ที่ไปอีกเล็กน้อยโดยให้คุณสลับระหว่างสายอักขระตัวแทนผู้ใช้เบราว์เซอร์ของระบบปฏิบัติการต่างๆ เบราว์เซอร์สำหรับพวกเขา

ฉันชอบรสชาติ "esolutions.se" เนื่องจากความง่ายในการเพิ่มสตริงตัวแทนผู้ใช้ที่กำหนดเองลงในรายการสำหรับการปรับแต่งได้มากเท่าที่คุณต้องการ (เรียกใช้ออฟไลน์ด้วยซึ่งอาจเป็นประโยชน์ในบางกรณี): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

อย่างไรก็ตามนั่นคือ 2 เซ็นต์ของฉัน : P

— kanidrive
แหล่งที่มา

ฉันจะเปิดมุมมองมือถือของหน้าเว็บในเบราว์เซอร์เดสก์ท็อปได้อย่างรวดเร็วได้อย่างไร

Firefox:

โครเมียม:

Safari:

ขอบ: