จะจำลองหน้าจอความละเอียดสูงขึ้นได้อย่างไร? [ปิด]

95

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

ปิดให้บริการใน7 ปีที่ผ่านมา

มีวิธีใดบ้างที่เบราว์เซอร์จะทดสอบเว็บไซต์ของฉันด้วยความละเอียดที่สูงกว่าหน้าจอของฉัน

เช่นฉันมีหน้าจอ 1440 x 900 และฉันต้องการทดสอบเว็บไซต์ในขนาด 1920 x 1200, 1920 x 1080 เป็นต้น

html css resolution

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

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

— Endophage

1

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

— คุณ

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

— Endophage

1

@ Endophage: ดังนั้นจำเป็นต้องใช้40em(หรือการวัดที่คล้ายกัน) ไม่ใช่960pxเป็นความกว้างของคุณ พิกเซลจะไม่ขนาดเมื่อฉันตัดสินใจขนาดตัวอักษร 12px คุณมีขนาดเล็กเกินไปสำหรับฉันและกด-Cmd +นอกจากนี้หน้าต่างเบราว์เซอร์ของฉันแทบจะไม่ถึง 960px เหมือนเดิม

— คุณ

@ คุณจริงๆแล้วพิกเซลจะปรับขนาดเมื่อคุณกดCtrl/Cmd +เพราะเป็นฟังก์ชันซูม คุณสามารถลองได้ที่นี่ใน SO ส่วนเนื้อหาหลักกว้าง 960px การใช้สิ่งต่างๆเช่น 40em จะไม่ปรับขนาดตามความละเอียดหน้าจอ การใช้emขนาดจะสัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลักซึ่งสืบทอดมาจนถึง 1em / 16px ที่ระดับบนสุดเว้นแต่จะถูกลบล้าง (และขออภัยควรเป็น 12pt ไม่ใช่ px ในความคิดเห็นก่อนหน้านี้) อ่านต่อ: kyleschaeffer.com/best-practices/…

— Endophage

76

[แก้ไข: ตรวจสอบ devtools เบราว์เซอร์ของคุณก่อน! ดังที่ @SkylarIttner ชี้ให้เห็นในความคิดเห็นเครื่องมือสำหรับการทดสอบการออกแบบที่ตอบสนองได้รับการเปิดตัวแล้วเนื่องจากในเบราว์เซอร์ส่วนใหญ่เนื่องจากมีการโพสต์โซลูชันด้านล่าง พวกเขาน่าจะเป็นตัวเลือกที่ดีที่สุด / ง่ายที่สุดในตอนนี้]

คุณอาจจะถูกต้องฉันหากฉันผิดเพียงแค่สร้าง iframe ด้วยstyle="desired width & height"และเป็นลูกชายคนเดียวของsrc="your/test.site" <body>ควรแสดงไซต์ราวกับว่าความละเอียดคือความกว้าง / ความสูงที่ระบุและส่งผลให้แถบเลื่อนเพื่อตรวจสอบ

ไม่สะดวกเหมือนใช้บุคคลที่สามต้องตั้งค่าเอง แต่มีข้อดีคือสามารถทดสอบภายในเครื่องโดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต

— Cody Crumrine
แหล่งที่มา

5

ทำไม ... ต้องบอกว่าอัจฉริยะ +1

— Mafia

แน่นอน! ขอบคุณ! ^^

— Oskar Duveborn

ฉันขอบคุณไม่พอ!

— Rahman Sharif

1

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

— Cody Crumrine

1

ในโอกาสที่จะช่วยทุกคนนี่คือตัวอย่างโค้ดที่จะทำตามที่ @Cody Crumrine แนะนำและเป็น Genius !! <iframe src = " site to test.com" width = "1024" height = "768"> </iframe>

— Stuart

28

วิธีนี้เร็วกว่าวิธีที่เสนอข้างต้น:

http://www.infobyip.com/testwebsiteresolution.php

มันไม่หลากหลายเท่า browserhots.org แต่เร็วกว่ามาก (ไม่กี่วินาทีกับคิว 45 นาที)

— ไคล์
แหล่งที่มา

นี่ไม่ใช่คำตอบที่ไม่ดี อย่างไรก็ตามไซต์นั้นไม่มีอะไรที่คุณไม่สามารถทำได้ด้วยตัวเองเพียงแค่ปรับขนาดหน้าต่างเบราว์เซอร์บนคอมพิวเตอร์เดสก์ท็อป IMHO ลิงก์ในหน้านั้นสำหรับแท็บเล็ตและโทรศัพท์นั้นไร้ค่าโดยสิ้นเชิง ... เพราะบนหน้าจอ iPod เพียงเล็กน้อยไซต์กว้าง 1,000 พิกเซลของฉันจะถูกปรับขนาดโดยอัตโนมัติโดย Mobile Safari เพื่อให้แสดงผลได้อย่างสมบูรณ์แบบ

— Sparky

4

@ Sparky672 โดยส่วนตัวแล้วฉันไม่สามารถปรับขนาดเบราว์เซอร์ให้ใหญ่กว่าความละเอียดหน้าจอได้ OP ขอให้เห็น 1920 ใน 1440 อาจมีวิธี แต่มันง่ายเหมือนวิธีแก้ปัญหาของ infobyip หรือไม่? ขอโทษถ้าฉันมองข้ามสิ่งที่ชัดเจน (ฉันรู้สึกว่าฉันอาจจะเป็น)

— Kyle

2

ขอบคุณ @ Sparky672 และไม่มีปัญหา แต่คุณไม่ควรลบความคิดเห็นของคุณ "ไซต์นั้นไม่มีอะไรที่คุณไม่สามารถทำได้ด้วยตัวเองเพียงแค่ปรับขนาดหน้าต่างเบราว์เซอร์บนคอมพิวเตอร์เดสก์ท็อป" เพราะนั่นไม่เป็นความจริง?

— Kyle

1

@ Sparky672 แนวตั้งล่ะ

— Kyle

1

ฉันใช้แนวตั้งเพื่อดูว่าอะไรอยู่ในครึ่งหน้าบนและล่าง ฉันรวมเข้ากับ StatsCounter และ MouseFlow เพื่อดูว่าผู้ชมเห็นกี่เปอร์เซ็นต์ ฉันรักคุณ Sparky! ฉันคิดว่าคุณอ่านน้ำเสียงของฉันผิด และฉันต้องการที่จะเป็นประโยชน์ ไม่มีใครจะมองหาวิธีแก้ปัญหาที่ฉันให้ด้วย 0 คะแนนและรายการความคิดเห็น แต่ก็โอ ...

— Kyle

9

แนวคิดบางประการ:

ใช้เบราว์เซอร์ซูม 1024x768 ซูม 50% = ความละเอียดจำลอง 2048x1536 ฉันรู้ว่า Chrome ปรับขนาดภาพและอื่น ๆ สิ่งต่างๆอ่านยาก แต่ฉันสมมติว่าคุณกำลังทดสอบตำแหน่งและอื่น ๆ

นอกจากนี้คุณสามารถใช้โปรแกรมสกรีนช็อตเพื่อถ่ายภาพหน้าจอที่มีความละเอียดสูงกว่าปกติได้ (fireshot บน Firefox ให้ฉันทำ แต่มีปัญหาหน่วยความจำที่มีความละเอียดสูงมากและไม่ฟรีอีกต่อไป)

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

6

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

— Eugen Constantin Dinca
แหล่งที่มา

4

ลองviewlike.usหรือscreen-resolution.com ไม่ใช่ความละเอียดที่เป็นไปได้ทั้งหมด แต่เป็นความละเอียดที่พบบ่อยที่สุดอย่างน้อยที่สุด

ฉันไม่ได้ลอง แต่ดูเหมือนว่าจะตรงไปตรงมา

— เอ็ดดี้เฉิง
แหล่งที่มา

ความละเอียดหน้าจอแสดงสิ่งนี้: "ความละเอียดหน้าจอของคุณเล็กเกินไปป๊อปอัปที่คุณเลือกใหญ่เกินไปสำหรับความละเอียดหน้าจอที่คุณใช้ความละเอียดหน้าจอของคุณคือ 1440 พิกเซลคูณ 900 พิกเซลหน้าต่างป๊อปอัปที่คุณพยายามเปิดคือ 1920 พิกเซลคูณ 1200 "

— HappyDeveloper

มุมมองเช่นเราพ่นสิ่งนี้: "ต้องห้ามคุณไม่มีสิทธิ์เข้าถึง / บนเซิร์ฟเวอร์นี้นอกจากนี้ยังพบข้อผิดพลาด 404 Not Found ขณะพยายามใช้ ErrorDocument เพื่อจัดการคำขอ Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server ที่ viewlike.us Port 80 "

— HappyDeveloper

2

แม้ว่าสิ่งนี้จะไม่ได้บอกความละเอียดที่แน่นอนในการทดสอบของคุณ แต่คุณสามารถใช้zoomเครื่องมือใน Chrome หรือ FF เพื่อย่อได้ สิ่งนี้จะให้แนวคิดที่ค่อนข้างถูกต้องว่าไซต์มีลักษณะอย่างไรบนหน้าจอที่มีความละเอียดสูงกว่า

— Jason Gennaro
แหล่งที่มา

2

หากคุณพอใจเพียงแค่เห็นภาพหน้าจอคงที่ของไซต์ของคุณฉันขอแนะนำhttp://browsershots.org/

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

คุ้มค่าบุ๊กมาร์ก

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

1

คุณอาจต้องการลองใช้wkhtmltoimageซึ่งสามารถจับภาพหน้าจอด้วยความละเอียดโดยพลการ

นอกจากนี้ใน KDE4 ยังสามารถขยายหน้าต่างให้ใหญ่เกินขนาดหน้าจอได้ ฉันคิดว่าฉันเคยเห็นมันใน Windows 7 ด้วย ไม่แน่ใจเกี่ยวกับ OS อื่น ๆ

— ผู้ใช้ 123444555621
แหล่งที่มา

1

IE9 ช่วยให้คุณสามารถปรับขนาดหน้าต่างเบราว์เซอร์ให้มีขนาดตามอำเภอใจ: กด F12 สำหรับเครื่องมือสำหรับนักพัฒนาไปที่ Tools | ปรับขนาดและเลือกขนาดที่คุณต้องการ จากนั้นใช้เครื่องมือบางอย่างที่สามารถจับภาพหน้าต่างนอกหน้าจอได้หากหน้าต่างใหญ่กว่าหน้าจอของคุณ นี้บทความน่าจะระบุว่า Snagit สามารถทำเช่นนี้ จากนั้นดูรูปที่ถ่าย

— จาโคไบเออร์
แหล่งที่มา