ความละเอียดเว็บไซต์ที่แนะนำ (กว้างและสูง)? [ปิด]

มีมาตรฐานในการแก้ปัญหาเว็บไซต์ทั่วไปหรือไม่?

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

มีมาตรฐานแบบนี้หรือไม่?

คำแนะนำในวันนี้คือ:

เพิ่มประสิทธิภาพสำหรับ 1024x768 สำหรับเว็บไซต์ส่วนใหญ่จะครอบคลุมผู้เยี่ยมชมส่วนใหญ่ บันทึกส่วนใหญ่ระบุว่า 92-99% ของการเข้าชมของคุณจะกว้างมากกว่า 1024 ในขณะที่ 1280 เป็นเรื่องปกติมากขึ้นเรื่อย ๆ แต่ก็ยังมีล็อตที่ 1024 และต่ำกว่านั้น เพิ่มประสิทธิภาพสำหรับสิ่งนี้ แต่อย่าเพิกเฉยต่อสิ่งอื่น ๆ

1024 = 960 ~ การบัญชีสำหรับการเลื่อนขอบหน้าต่าง ฯลฯ หมายถึงความกว้างที่แท้จริงของหน้าจอ 1024x768 คือประมาณ 960 พิกเซล เครื่องมือบางอย่างจะขึ้นอยู่กับขนาดที่เล็กกว่าเล็กน้อยประมาณ 940 นี่คือความกว้างของภาชนะที่เริ่มต้นในการบูตทวิตเตอร์

อย่าออกแบบสำหรับขนาดเดียว ขนาดหน้าต่างแตกต่างกันไป อย่าถือว่าขนาดหน้าจอเท่ากับขนาดหน้าต่าง ออกแบบสำหรับขั้นต่ำที่เหมาะสม แต่ถือว่าจะปรับ

ใช้การออกแบบที่ตอบสนองและรูปแบบของเหลว ใช้เค้าโครงที่จะปรับเมื่อปรับขนาดหน้าต่าง ผู้คนทำสิ่งนี้กันมากโดยเฉพาะบนจอภาพขนาดใหญ่ นี่เป็นเพียงแนวทางปฏิบัติ CSS ที่ดี มีฟรอนต์เอนด์เฟรมเวิร์กมากมายที่รองรับสิ่งนี้

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

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

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

เพิ่มเติมเกี่ยวกับความละเอียดหน้าจอ:

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

เพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนอง:

• การออกแบบเว็บไซต์ที่ตอบสนอง (2010, 25 พฤษภาคม), Ethan Marcotte, A List Apart
• การออกแบบเว็บไซต์ที่ตอบสนองที่ Wikipedia
• รูปแบบเค้าโครงหลายอุปกรณ์ (2012, 14 มี.ค. ) Luke Wroblewski แคตตาล็อกรูปแบบยอดนิยมสำหรับการจัดวางหน้าจอหลายอุปกรณ์ที่ปรับเปลี่ยนได้

เครื่องมือและเฟรมเวิร์กส่วนหน้าสำหรับการออกแบบที่ตอบสนองและรูปแบบของเหลว:

• Twitter Bootstrap
• มูลนิธิ Zurb
• 50 เครื่องมือที่ยอดเยี่ยมสำหรับการออกแบบเว็บที่ตอบสนอง (2012, 24 เมษายน) Denise Jacobs & Peter Gasston

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

การใส่ข้อ จำกัด เทียมเช่นขนาดหน้าจอขั้นต่ำจะ จำกัด ตลาดของคุณ

ต้องบอกว่าฉันเชื่อว่าเดสก์ท็อปทุกเครื่องควรแสดง 1024x768 ได้ แต่เบราว์เซอร์ที่ทำงานบน iPhone หรืออุปกรณ์ที่ท้าทายหน้าจออื่น ๆ หรือแม้แต่เบราว์เซอร์ที่ไม่ได้ใช้เดสก์ท็อปทั้งหมดสำหรับเบราว์เซอร์

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

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

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

อัปเดตเมื่อ 15/15/2010: เมื่อฉันตอบคำถามนี้ครั้งแรก 800 พิกเซลเป็นคำตอบที่เหมาะสม อย่างไรก็ตามในตอนนี้ฉันขอแนะนำให้กว้าง 1024 พิกเซล (หรือ 960 ตามที่คนอื่นชี้ให้เห็น) เทคโนโลยีเดินหน้า ...

นี่คือสถิติของการแสดงเบราว์เซอร์ในปี 2008: http://www.w3schools.com/browsers/browsers_display.asp

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

มีมาตรฐานอุตสาหกรรมสำหรับความกว้าง (อย่างน้อยก็ตาม yahoo) ความกว้างที่รองรับคือ 750, 950, 974, 100%

มีข้อดีของความกว้างเหล่านี้สำหรับกริดที่กำหนดไว้ล่วงหน้า (เค้าโครงคอลัมน์) ซึ่งทำงานได้ดีกับมิติข้อมูลมาตรฐานสำหรับโฆษณาหากคุณจะรวมไว้

การพูดคุยที่น่าสนใจก็น่าดู

ดูYUI Base

นี่คือเครื่องมือที่ยอดเยี่ยม: ขนาดเบราว์เซอร์ Google Labs

ฉันจะบอกว่าคุณควรคาดหวังให้ผู้ใช้มีจอภาพที่มีความละเอียด 800x600 เท่านั้น รัฐบาลแคนาดามีมาตรฐานที่ระบุรายการนี้เป็นหนึ่งในข้อกำหนด แม้ว่าอาจจะดูเหมือนน้อยสำหรับคนที่มีจอภาพไวด์สกรีน แต่อย่าลืมว่าไม่ใช่ทุกคนที่มีจอภาพที่ดี ฉันยังคงรู้จักผู้คนมากมายที่ทำงานที่ 1024x768 และไม่ใช่เรื่องแปลกเลยที่จะเจอคนที่วิ่งใน 800x600 โดยเฉพาะในเว็บคาเฟ่ราคาถูกขณะเดินทาง นอกจากนี้ยังเป็นการดีที่จะทำให้หน้าต่างเบราว์เซอร์ของคุณเต็มหน้าจอหากคุณไม่ต้องการ คุณสามารถทำให้ไซต์กว้างขึ้นบนหน้าจอที่กว้างขึ้น แต่อย่าทำให้ผู้ใช้เลื่อนในแนวนอน เคย. ข้อดีอีกอย่างของการรองรับความละเอียดที่ต่ำกว่าคือไซต์ของคุณจะทำงานบนโทรศัพท์มือถือและ Nintendo Wii ง่ายขึ้นมาก

หมายเหตุเกี่ยวกับความกว้างอย่างน้อย 1280 ของคุณฉันต้องบอกว่าเป็นวิธีการลงน้ำ จอภาพที่ไม่ใช่แบบไวด์สกรีนขนาด 17 และ 19 นิ้วส่วนใหญ่รองรับความละเอียดสูงสุด 1280x1024 เท่านั้น และแล็ปท็อปจอกว้าง 14 นิ้วที่ฉันพิมพ์อยู่ตอนนี้มีขนาด 1280 พิกเซลเท่านั้น ฉันจะบอกว่าความละเอียดขั้นต่ำที่ใหญ่ที่สุดที่คุณควรพยายามคือ 1024x768 แต่ 800x600 จะเหมาะที่สุด

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

ไม่ควรกำหนดเป้าหมายความละเอียดเฉพาะใด ๆ แต่ควรปรับให้เข้ากับความละเอียดต่างๆได้อย่างง่ายดาย

แนวทางที่เราใช้ซึ่งดูเหมือนจะใช้กันอย่างแพร่หลายและได้รับการสำรองข้อมูลโดยตัวเลขที่เราได้รับจาก Google Analytics คือการออกแบบไซต์ให้ทำงานบนหน้าจอที่กว้าง 1024 พิกเซลและสูง 768 พิกเซล (1024x768 และ 1280x800 เป็นความละเอียดทั่วไปที่เราเห็นซึ่งคิดเป็นอย่างน้อย 70% ของการเข้าชมทั้งหมด)

นี่คือเหตุผลที่คุณเห็นไซต์จำนวนมาก (รวมอยู่ด้วย) ซึ่งใช้คอลัมน์กลางกว้างประมาณ 1,000 พิกเซลและมีเนื้อหาที่สำคัญที่สุดใน 500-600 พิกเซลด้านบนดังนั้นจึงอยู่ในครึ่งหน้าบนเมื่อดูในหน้าจอขนาดนี้

การใช้เลย์เอาต์แบบกว้าง 1,000 พิกเซลทำงานได้ดีพอสมควรกับขนาดหน้าจอที่มีความกว้างสูงสุดประมาณ 1680 พิกเซล (โดยทั่วไปจะสูงที่สุดเท่าที่คุณจะเห็นในแล็ปท็อปยกเว้นขนาดใหญ่ 17 นิ้ว) แต่จะดูโง่ไปหน่อยใน 1920 พิกเซล กว้าง ๆ (คอมพิวเตอร์ระดับไฮเอนด์โดยทั่วไปคือเวิร์กสเตชัน) อย่างไรก็ตามความละเอียดสูงมากเหล่านี้ไม่ได้คำนึงถึงเปอร์เซ็นต์การเข้าชมจำนวนมากบนอินเทอร์เน็ตทั่วไป - 2% หรือน้อยกว่า (ในทางกลับกันหากคุณมีผู้ชมที่เชี่ยวชาญเช่นไซต์นี้ ตัวเลขที่มีความละเอียดสูงอาจสูงกว่านี้บ้าง)

แม้ว่าความกว้างที่ดีที่สุดอาจถึง 1024 แต่คุณจะต้องปรับความสูงสำหรับบัญชีสำหรับการตั้งค่าเบราว์เซอร์ต่างๆ (แถบเครื่องมือการนำทางแถบเครื่องมือบุ๊กมาร์กแถบเครื่องมือสถานะ ฯลฯ ) และบัญชีสำหรับการตั้งค่าแถบงาน มันจะลด 768 ลงอย่างรวดเร็วเหลือ 550

ไม่ว่าเบราว์เซอร์เป้าหมายของคุณจะมีขนาดเท่าใดตรวจสอบให้แน่ใจว่าได้มีพื้นที่สำหรับแถบเครื่องมือของเบราว์เซอร์แถบสถานะและแถบเลื่อนตามด้านบน Internet Explorer (IME) มักมีพื้นที่แนวตั้งมากกว่า 100px ในแถบเครื่องมือและแถบสถานะ โดยปกติถ้าฉันถ่ายด้วย 1024 x 768 ฉันจะพยายามออกแบบให้กว้างประมาณ 960 - 980px และสูง 600px เพื่อความปลอดภัย ด้วยวิธีนี้คุณสามารถรองรับการเลื่อนได้หากจำเป็นและมีพื้นที่สีขาวที่สวยงาม (หากการออกแบบต้องการ) ฉันขอแนะนำกริด YUI สำหรับอินสแตนซ์ที่คุณต้องการกำหนดเป้าหมายขนาดเฉพาะ:

ยูอิกริด

ฉันได้รับคำถามมากมายจากนักออกแบบเกี่ยวกับความกว้างไม่เพียง แต่ต้องใช้ความสูงเท่าใดเพื่อ 'เก็บทุกอย่างไว้ในครึ่งหน้าบน' นี่คือคำตอบหนึ่งที่ฉันให้เมื่อเร็ว ๆ นี้ -

สำหรับความกว้างฉันไม่ใช่นักออกแบบ แต่ฉันได้อ่านว่าความกว้าง 960px เป็นวิธีที่จะไปในทุกวันนี้เพราะมันช่วยให้ตัวเองถูกแบ่งออกเป็นคอลัมน์ที่ดูดีและเข้ากันได้ดีกับจอภาพส่วนใหญ่ หากทำได้ให้ออกแบบเลย์เอาต์แบบเหลว - แต่วิธีนี้ใช้ไม่ได้จริงเสมอไปทั้งนี้ขึ้นอยู่กับผู้ออกแบบทักษะ CSS ของคุณรูปภาพและจำนวนข้อความ

(คุณต้องการให้มีอักขระ 65-80 ตัวต่อบรรทัดโดยมีความสูงบรรทัดประมาณ 1.15) นี่คือความกว้างของคอลัมน์ที่เหมาะสมที่สุดสำหรับข้อความและได้รับการพิสูจน์แล้วว่าเร็วและน่าอ่านกว่าคอลัมน์ที่กว้างหรือแคบมาก)

เท่าที่ 'ครึ่งหน้าบน' ฉันต้องระมัดระวังไม่ให้ใช้แนวคิดดังกล่าวบนเว็บ การเลื่อนในแนวนอนสามารถและควรหลีกเลี่ยงได้ แต่การเลื่อนในแนวตั้งเป็นสิ่งที่คุณไม่สามารถหลีกเลี่ยงได้ 100% สิ่งที่ฉันบอกคุณได้ก็คือบนจอแสดงผล 1024x768 (อย่างน้อย 95% ของผู้ใช้ที่มีสิ่งนั้นหรือสูงกว่านั้น) คุณควรจะพอใจกับบล็อกสูง 600px คงที่ แต่มีรูปแบบการแสดงผลที่แตกต่างกันมากมายเบราว์เซอร์ Chrome สามารถใช้พื้นที่ได้มากและไม่ใช่ทุกคนที่จะขยายหน้าต่างเบราว์เซอร์ให้ใหญ่ที่สุด

นี่คือไซต์อื่น ๆ ที่พูดในสิ่งเดียวกันไม่มากก็น้อย แต่การวางแผนที่จะให้ทุกอย่าง 'ครึ่งหน้าบน' เป็นเรื่องยากเพราะคุณอาจมีเพียง 400px หรือมากกว่านั้นตามสถิติจริง

และในที่สุดก็เป็นบทความยาว ๆ ที่มีรายละเอียดมาก (ฉันจะโพสต์มากกว่านี้ แต่ SO บอกว่าฉันเป็นคนโง่เกินไป) - วิธีการออกแบบสำหรับขนาดเบราว์เซอร์ - baekdal.com

โดยส่วนตัวแล้วฉันมักจะติดอยู่ที่ความกว้างสูงสุด 1000px ซึ่งอยู่ตรงกลางหน้ากระดาษ (ผ่านระยะขอบซ้าย / ขวา: อัตโนมัติ)

หากคุณใช้งานอะไรที่น้อยกว่า 1024x768 ก็ถึงเวลาอัปเกรด อย่างจริงจัง. เกือบจะเป็นปี 2010 แล้วคุณสามารถซื้อจอ LCD ราคาถูกที่มีความละเอียดดั้งเดิม 1280x1024

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

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

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

เอาล่ะฉันเห็นข้อมูลที่ผิดมากมายที่นี่ สำหรับผู้เริ่มต้นการสร้างหน้าเว็บโดยใช้ความละเอียดบางอย่างเช่น 800x600 เช่นทำให้หน้านั้นแสดงผลอย่างถูกต้องโดยใช้ความละเอียดนั้นเท่านั้น! เมื่อหน้าเดียวกันนั้นปรากฏบนแล็ปท็อปของคนอื่นหรือหน้าจอพีซีที่บ้านหน้านั้นจะแสดงโดยใช้ความละเอียดปัจจุบันของหน้าจอนั้นไม่ใช่ความละเอียดที่คุณใช้ในการออกแบบเพจ อย่าสร้างหน้าเว็บสำหรับความละเอียดที่เฉพาะเจาะจง! มีอัตราส่วนภาพและความละเอียดหน้าจอที่แตกต่างกันมากเกินไปจนคาดว่าสถานการณ์ "หนึ่งขนาดเหมาะกับทุกคน" ซึ่งในการออกแบบเว็บจะไม่มีอยู่จริง นี่คือวิธีแก้ปัญหา: ใช้ CSS3 Media Queries เพื่อสร้างโค้ดที่ปรับความละเอียดได้ นี่คือตัวอย่าง:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

ดูสิ่งที่เราเพิ่งทำไปคือระบุสไตล์ 3 ชุดที่แสดงผลด้วยความละเอียดที่แตกต่างกัน ในกรณีตัวอย่างของเราหากความละเอียดของหน้าจอใหญ่กว่า 800px CSS สำหรับ 1024 จะถูกดำเนินการแทน ในทำนองเดียวกันหากหน้าจอที่แสดงเนื้อหาเป็น 1224px 1280 จะถูกดำเนินการเนื่องจาก 1224 มีขนาดใหญ่กว่า 1024 ไซต์ที่ฉันกำลังทำงานอยู่ตอนนี้ทำงานได้ที่ความละเอียดทั้งหมด 800x600 ถึง 1920x1080 สิ่งที่ควรทราบอีกประการหนึ่งก็คือไม่ใช่ทุกจอที่มีความละเอียดเท่ากันจะมีหน้าจอขนาดเดียวกัน คุณสามารถวางแล็ปท็อปได้ 15.4 เครื่องเคียงข้างกันในขณะที่ทั้งสองเครื่องมีลักษณะเหมือนกันทั้งคู่อาจมีความละเอียดที่แตกต่างกันอย่างมากเนื่องจากพิกเซลทั้งหมดไม่ได้มีขนาดเท่ากันบนหน้าจอ LCD ที่แตกต่างกัน ดังนั้นใช้ข้อความค้นหาสื่อและเริ่มสร้างเว็บไซต์ของคุณด้วยหน้าจอแล็ปท็อปที่มีความละเอียดสูงโดยเฉพาะ 1280+ นอกจากนี้ สร้างแบบสอบถามสื่อแต่ละรายการโดยใช้ความละเอียดที่แตกต่างกันบนแล็ปท็อปของคุณ คุณสามารถใช้การตั้งค่าความละเอียดของคุณใน Windows เพื่อปรับลง 800x600 และสร้างคิวรีสื่อที่ความละเอียดนั้นจากนั้นเปลี่ยนเป็น 1024x768 และสร้างคิวรีสื่ออื่นที่ความละเอียดนั้น ฉันสามารถไปได้เรื่อย ๆ แต่ฉันคิดว่าพวกคุณน่าจะเข้าใจตรงกัน

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

บทช่วยสอนนั้นจะแสดงวิธีการออกแบบสำหรับอุปกรณ์ทั้งหมด นอกจากนี้ยังมีบทช่วยสอนสำหรับ Media Queries โดยเฉพาะ ฉันพัฒนาไซต์ทั้งหมดเพื่อแสดงผลบนอุปกรณ์ทั้งหมดทุกหน้าจอและความละเอียดทั้งหมดโดยไม่ใช้โดเมนย่อยและมีเพียง CSS เท่านั้น! ฉันกำลังดำเนินการสนับสนุนแท็บเล็ตและสมาร์ทโฟนอยู่ ไซต์แสดงผลได้อย่างสมบูรณ์แบบบนแล็ปท็อปทุกเครื่องหรือทีวีจอแอลซีดีขนาด 50 นิ้วของคุณและหลาย ๆ หน้าทำงานได้อย่างสมบูรณ์แบบบนอุปกรณ์พกพาทั้งหมด หากคุณใส่โค้ดทั้งหมดบนหน้าเพจของคุณจะโหลดลดน้ำหนักอย่างรวดเร็ว! นอกจากนี้อย่าลืมใส่ใจกับการสนทนาในบทความนั้นเกี่ยวกับ CSS "background-size: cover;" หรือคุณสมบัติ "มี" ซึ่งจะทำให้กราฟิกพื้นหลังของคุณลื่นไหลและสามารถแสดงผลได้อย่างสมบูรณ์แบบในทุกความละเอียด

ทำตามบทเรียนของไซต์และคุณสามารถสร้างหน้าเว็บเดียวที่แสดงผลทุกอย่างและทุกอย่าง!

พยายามกำหนดเป้าหมาย 1024 เป็นความกว้างขั้นต่ำ ลองดูที่ 800 แต่อย่ากังวลมากเกินไปในการทำงานนั้น ที่ 800x600 แทบจะไม่มีเว็บไซต์หลักใดใช้งานได้ดังนั้นคนที่ทำงานด้วยความละเอียดนั้นจะมีปัญหาอยู่ตลอดเวลา

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

ฉันกำหนดเป้าหมายไปที่จอภาพ 1024 พิกเซล (แต่อย่าใช้พื้นที่นั้น 100%) ฉันยอมแพ้กับผู้ที่มี 800x600 ฉันอยากจะลงโทษไม่กี่คนด้วยฮาร์ดแวร์ที่ล้าสมัยโดยการเลื่อนหากจำเป็นเทียบกับการลงโทษทุกคนด้วยอุปกรณ์ใหม่โดยสิ้นเปลืองพื้นที่

ฉันคิดว่ามันขึ้นอยู่กับผู้ชมของคุณและลักษณะของแอปของคุณ

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

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

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

โดยส่วนตัวแล้วฉันต้องการออกแบบสำหรับวิวพอร์ตที่ ~ 960 พิกเซลขึ้นไปคุณไม่สามารถทำได้เสมอไป ดังนั้นในบางกรณีก็ยังปลอดภัยที่สุดที่จะออกแบบสำหรับวิวพอร์ต <= 760 พิกเซลหรือมากกว่านั้น (จอแสดงผลกว้าง 800 พิกเซลขยายใหญ่สุด) แม้ว่าในที่สุดเราจะสามารถยกเลิกข้อ จำกัด นี้ครั้งแล้วครั้งเล่า - สำหรับเดสก์ท็อปอย่างน้อย - กำลังใกล้เข้ามาอย่างรวดเร็ว

ในกรณีที่การแปลงเป็นปัญหา - และคุณมีเค้าโครงความกว้างคงที่ - คุณควรมีเหตุผลที่ดีในการวางสิ่งที่ผู้ใช้ต้องคลิกเพื่อให้เครื่องบันทึกเงินสดไปที่ "ka-ching" ที่ใดก็ได้ทางตะวันออกของวันที่ 760 พิกเซล

Ditto สำหรับการนำทางหลัก

สุดท้ายทดสอบเค้าโครงของคุณในทุกสิ่งที่คุณสามารถทำได้ ใหญ่. เล็ก เดสก์ทอป. มือถือ งาน. ไม่มีสิ่งทดแทน

ฉันเพิ่งสุ่มตัวอย่างความละเอียดหน้าจอจากไซต์ไคลเอ็นต์ทั้งหมดที่ฉันเข้าถึงซึ่งรวมถึงไซต์มากกว่า 20 แห่งในมากกว่า 8 อุตสาหกรรมผลลัพธ์ที่ได้คือ
ข้อความแสดงแทน http://unkwndesign.com/so/percentScreenResolutions.png
จากสิ่งนี้ฉันจะบอกว่ามันดูดีใน 1024x768 เนื่องจากเป็นส่วนใหญ่ที่นี่โดยการยิงไกล อย่ากังวลกับความสูงมากนักอย่างไรก็ตามพยายามหลีกเลี่ยงการทำให้หน้าส่วนใหญ่มีมากกว่า 1-2 หน้าที่พิมพ์ตามขนาดฟอนต์เริ่มต้นของคุณคนส่วนใหญ่จะไม่อ่านหน้าที่ยาวขนาดนั้นและหากผู้ใช้ติดตั้งแถบเครื่องมือที่ใช้เวลานาน พื้นที่แนวตั้งความชอบส่วนตัวของฉันคือมันเป็นปัญหาของพวกเขา แต่ฉันไม่คิดว่ามันจะเป็นเรื่องใหญ่

* สังเกตว่าเปอร์เซ็นต์จะเพิ่มได้ถึง 100.05% เนื่องจากการปัดเศษ

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

และบางเบราว์เซอร์ก็มีแถบด้านข้างด้วย

ขึ้นอยู่กับสิ่งที่คุณต้องการแสดงผล แต่ฉันจะใช้เค้าโครงความกว้างตัวแปรที่ไม่แตกที่ความกว้างประมาณ 800-900

ความสูงไม่ใช่ปัญหาจริงๆ

sbeam กล่าวว่า 'คุณต้องการให้มีอักขระ 65-80 ตัวต่อบรรทัดเสมอ' นั่นไม่เป็นความจริง ตัวอย่างเช่น Wikipedia อาจมีอักขระ 180 ตัวต่อบรรทัด หรือหมายถึงเว็บไซต์เฉพาะ?