เบราว์เซอร์ไม่ขยายต่ำกว่า 400px ใช่ไหม

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

เมื่อฉันเปิดไซต์บนโทรศัพท์ของฉันมันดูสมบูรณ์แบบประมาณ 320px ดังนั้นฉันจึงรู้ว่ามันมีขนาดต่ำกว่า 400px

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

อีกครั้งบนเดสก์ท็อปมันลดขนาดลงเหลือความกว้างต่ำสุดประมาณ 400px และหยุดลง แต่เมื่อฉันเปิดมันขึ้นมาบนโทรศัพท์ของฉันมันก็จะปรับขนาดตามขนาดของหน้าจอโทรศัพท์ซึ่งประมาณ 320px ... สงสัยว่าทำไมอย่างน้อยที่สุด ไม่ลดลงถึง 320px บนเดสก์ท็อป

-edit- นอกจากนี้ฉันไม่แน่ใจว่าเรื่องนี้หรือไม่ แต่ Opera อนุญาตให้ลดขนาดลงจนแทบไม่มีอะไรเลย ... ดังนั้นจึงใช้งานได้กับ Opera และไม่ใช่ Chrome หรือ FF ... แนวคิดใด ๆ

Chrome ไม่สามารถปรับขนาดในแนวนอนต่ำกว่า 400px (OS X) หรือ 218px (Windows) ได้แต่ฉันมีวิธีแก้ไขปัญหาที่ง่ายมาก:

1. เชื่อมต่อตัวตรวจสอบเว็บไปทางขวาแทนที่จะไปที่ด้านล่าง
2. ปรับขนาดแผงตรวจสอบ - ตอนนี้คุณสามารถทำให้พื้นที่เบราว์เซอร์มีขนาดเล็กมาก (ลดลงถึง 0px)

อัปเดต:ตอนนี้ Chrome อนุญาตให้คุณจัดเรียงหน้าต่างผู้ตรวจสอบในแนวตั้งเมื่อเทียบกับด้านขวา! นี่เป็นการปรับปรุงเค้าโครง

การติดตั้ง HTML และ CSS นั้นเข้ากันได้ดีจริงๆและคุณก็สามารถเปิดแผงคอนโซลขนาดเล็กได้เช่นกัน สิ่งนี้ทำให้ฉันย้ายจาก Firefox / Firebug ไปเป็น Chrome ได้อย่างสมบูรณ์

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

UPDATE : นี่คืออีกหนึ่งเครื่องมือสุดเจ๋งจริง ๆ http://lab.maltewassermann.com/viewport-resizer/

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

อัปเดต: 7/14/2013

ด้วยรุ่น chrome ล่าสุดตอนนี้คุณสามารถปรับขนาดแถบที่อยู่อีกครั้งและมันจะซ่อนส่วนเสริมโดยอัตโนมัติ

ฉันถูกนิ่งงันเช่นกัน แต่จบลงด้วยวิธีง่ายๆ ฉันเพิ่งสร้างไฟล์ HTML พร้อมลิงก์เพื่อเปิดหน้าต่างใหม่:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

หน้าต่างใหม่นี้ไม่มีอะไรเลยนอกจากแถบที่อยู่และ Chrome ทำให้ฉันสามารถลดขนาดได้อย่างอิสระจนถึง 111x80

โซลูชันของ nayan9 ใช้งานได้ดีมากและสามารถใส่ไว้ในบุ๊คมาร์คได้โดยไม่ต้องสร้างไฟล์ html ใน Chrome ให้สร้างบุ๊คมาร์คใหม่ด้วย URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

และตั้งชื่อเป็น "Open Small Window" หรือชื่ออื่นที่คล้ายกัน สิ่งนี้จะช่วยให้คุณเปิดหน้าต่างได้ง่ายโดยไม่ จำกัด ขนาดภายในโครเมียม โปรดทราบว่าการคัดลอกสิ่งนี้ลงในแถบที่อยู่ของคุณจะไม่ทำงาน Chrome จะตัด "javascript:" ออก

ในกรณีที่คุณต้องการลดความกว้างของหน้าจอเพื่อเลียนแบบอุปกรณ์ต่าง ๆ (และทำไมคุณต้องการทำเช่นนี้):

ตอนนี้ Chrome มีส่วน Emulation อยู่ในเครื่องมือตรวจสอบโดยเปิดใช้งานโดยคลิกที่ไอคอนโทรศัพท์เล็ก ๆ ในแถบเมนูด้านบน (ระหว่างแว่นขยายและองค์ประกอบ):

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

การเพิ่มสิ่งที่ nayan9 และ drinkdecaf กล่าวไว้คุณเพียงแค่โยนเอกสารเข้าไปในการเรียกไปที่หน้าต่างเปิดเพื่อดูหน้าที่คุณกำลังดูอยู่ในหน้าต่าง 320 คุณอาจต้องการเพิ่มความกว้างมากขึ้นหากคุณต้องการแถบเลื่อน

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

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

ในการใช้อีมูเลเตอร์เปิดDevTools (กดF12) จากนั้นคลิกที่ไอคอนต่อไปนี้เพื่อสลับDevice Toolbar:

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

ใน Chrome ไอคอนของส่วนเสริมของคุณที่มุมขวาบนทำให้เกิดปัญหา

-> ปรับขนาดแถบที่อยู่ (ซึ่งคุณพิมพ์ URL) เป็นความกว้างสูงสุด (ลากแถบที่ขอบขวาไปทางขวา)

หรือปิดการใช้งานไอคอน

ฉันขี้เกียจที่จะทำให้มันง่ายยิ่งขึ้นให้ bookmarklet ถามผู้ใช้เกี่ยวกับขนาด :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

ฉันพบวิธีแก้ปัญหาอย่างรวดเร็วสำหรับสิ่งนี้

เพียงติดตั้งส่วนเสริมการออกแบบเว็บไซต์ที่ตอบสนองต่อ Chrome และจะเปิดหน้าต่างแยกต่างหากโดยไม่มีแถบที่อยู่และแท็บซึ่งสามารถลดขนาดลงเหลือ 10 px หรือน้อยกว่า

เชื่อมโยงที่นี่: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

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

ทางออกที่ง่ายอีกวิธีหนึ่งคือการคลิก Strg + Shift + N เพื่อเข้าสู่โหมดไม่ระบุตัวตน คุณสามารถปรับขนาดหน้าต่างเบราว์เซอร์ได้ตามต้องการ

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

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

http://lab.maltewassermann.com/viewport-resizer/

ฉันมักพบปัญหานี้ด้วยแท็บที่ถูกตรึง Chrome จะไม่ปรับขนาดด้านล่างความกว้างแนวนอนของแท็บที่ถูกตรึงแปดแถบที่มองเห็นได้หากมี! เพียงปลดแท็บที่คุณต้องการปรับขนาดเพื่อแก้ปัญหานี้ ...

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

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

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

1. ลิงก์ไปยังวิธีเปิดใช้งานเมนูผู้พัฒนาในซาฟารี: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

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