ความกว้างมาตรฐานของเว็บไซต์เป็นพิกเซลหรือสถิติอยู่ที่ไหน

ไม่มีมาตรฐานแม้ว่านักพัฒนาส่วนใหญ่จะถือว่า 1024x768 เป็นมาตรฐาน

มีระบบกริด CSS ที่ชื่อ 960grid ซึ่งถือว่าความกว้างของร่างกายเป็น 960px จากนั้นแบ่งคอลัมน์ใน 96 คอลัมน์ที่มี 10px หรือ 80 ที่มี 12px

ปัญหาคือ: หน้าจอพีซีมีขนาดใหญ่ขึ้นเรื่อย ๆ อย่างช้าๆในบางภูมิภาค แต่เป็น

ในอีกทางหนึ่งที่ tech-tops คุณมีหน้าจอขนาดเล็กในอุปกรณ์มือถือและเน็ตบุ๊ก

การจัดการกับการกลับเป็นซ้ำอาจเจ็บปวด มี CSS Media Queries เพื่อช่วยเหลือ หรือคุณสามารถใช้แท็กลิงก์ (พร้อม rel มือถือ) เพื่อจัดเตรียมรุ่นอื่น ๆ ให้กับอุปกรณ์มือถือ

ติดตามลิงค์อ้างอิงสำหรับคุณ

• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
• http://dev.w3.org/csswg/css3-mediaqueries/

ความกว้างมาตรฐานสำหรับเว็บไซต์เป็นพิกเซลคืออะไร

จำนวนใด ๆ ที่มากกว่า 0 และน้อยกว่าอินฟินิตี้

แนวปฏิบัติที่เหมาะสมที่สุดในปัจจุบันสำหรับ Responsive Web Design (RWD) คือการรองรับทุกอุปกรณ์โดยไม่คำนึงถึงความกว้างเป็นพิกเซล โดยทั่วไปจะเกี่ยวข้องกับการใช้แบบสอบถามสื่อเพื่อให้สไตล์ที่แตกต่างกันสำหรับช่วงขนาดหน้าจอที่แตกต่างกัน ช่วงจริงนั้นมีความสำคัญน้อยกว่าการออกแบบที่มีความสอดคล้องกันในทุกขนาดและไซต์ยังคงใช้งานได้ตามขนาดต่าง ๆ

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

ช่วงความกว้างทั่วไปที่ใช้คือ:

• เล็กพิเศษ : 0-480
• ขนาดเล็ก : 480- 768
• กลาง : 768-1024
• ใหญ่ : 1024-1200
• ขนาดใหญ่พิเศษ : 1200+

ช่วงนี้เป็นเรื่องธรรมดามากที่ฉันจะบอกว่ามันเป็นมาตรฐาน ไม่จำเป็นต้องใช้ช่วงทั้งหมดเช่นไซต์อาจมีความกว้างของของเหลวสำหรับสิ่งใดก็ตามที่ต่ำกว่า 768 จากนั้นจึงเลือกความกว้างคงที่และจัดกึ่งกลางสำหรับ 768+

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

สถิติอยู่ที่ไหน

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

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

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

รุ่นเก่ารุ่น RWD ที่ล้าสมัยเพื่อประโยชน์ของผู้โพสต์

ฉันกำลังประหลาดใจที่ไม่มีใครมีความคิดที่จะพูดถึงขนาดเบราว์เซอร์โดย google

สำหรับมาตรฐาน:

80% ของผู้ดูสามารถจัดการกับความกว้างสูงสุด 1000px แต่ผู้ที่สามารถจัดการได้มากกว่าความกว้าง 1,000px มักจะไม่ทำเช่นนั้น ด้วยหน้าจอกว้างผู้คนจำนวนมากจะจัดเรียงหน้าต่างของพวกเขาครึ่งหน้าจอ ตอนนี้ Win7 รองรับ drag-n-dock เป็นไปได้ว่าจะเป็นที่นิยมมากขึ้น

สำหรับส่วนสูง: ความประทับใจแรกที่คุณมีต่อผู้ใช้นั้นอยู่ที่ด้านบนของหน้ามากถึงประมาณ ~ 600px อย่างไรก็ตามผู้ใช้ส่วนใหญ่รู้และคาดหวังว่าเนื้อหาจะ "ล้มเหลว" และเต็มใจและสามารถเลื่อนได้

หากคุณต้องการกว้างกว่า 1,000px ฉันขอแนะนำเลย์เอาต์ที่ให้ผู้ใช้บนเน็ตบุ๊กและหน้าจอขนาดเล็กสามารถดูเนื้อหาได้อย่างเหมาะสม

~ 960px มีแนวโน้มที่จะเป็นความกว้างมาตรฐาน แต่จริงๆแล้วมันขึ้นอยู่กับเนื้อหาและสไตล์

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

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

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

อย่าทำให้ผู้ใช้เลื่อนไปทางซ้ายหรือขวา การตัดเนื้อหาด้านข้างออกเป็นวิธีที่รวดเร็วที่สุดในการสูญเสียลูกค้าหรือผู้อ่าน

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

และเพียงปลายเนื้อหา; อาจมีกราฟิกสูง / ข้อมูลต่ำหรือข้อมูลสูง / กราฟิกต่ำ การพยายามรวมทั้งสองอย่างเข้าด้วยกันดูน่ากลัวอยู่เสมอ

มาตรฐานจะเป็น "กว้าง / สูงที่สุด" มันขึ้นอยู่กับหน้าจอผู้ใช้:

http://www.w3schools.com/browsers/browsers_display.asp

การรู้วิธีแก้ปัญหาหน้าจอที่ได้รับความนิยมนั้นเป็นประโยชน์และจากนั้นใช้แม่แบบของคุณตามการใช้งานทั่วไปโดยส่วนใหญ่ ... โดยส่วนตัวแล้วฉันแนะนำให้ใช้ Responsive Design - วิธีที่ไซต์ของคุณใช้งานได้สำหรับอุปกรณ์ทั้งหมดและการแก้ปัญหาทั้งหมด

ตั้งแต่เดือนมกราคม 2556

1. 1366x768 25.4%

2. 1920x1080 11.0%

3. 1280x1024 9.7%

4. 1440x900 7.3%

5. 1280x800 8.2%

6. 1680x1050 5.7%

7. 1600x900 5.0%

8. 1920x1200 2.9%

9. 1360x768 2.1%

10. 2560x1440 1.1%

11. อื่น ๆ11.6%

Google Analytics บันทึกความละเอียดหน้าจอของผู้เข้าชม คุณสามารถสร้างรายงานที่กำหนดเองได้อย่างง่ายดายเพื่อตรวจสอบขนาดหน้าจอทั่วไปของผู้เข้าชมของคุณ นี่คือสถิติ (15 อันดับแรก) สำหรับเว็บไซต์ของฉันสำหรับพฤษภาคม 2013:

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

สถิติจะแตกต่างกันไปในแต่ละไซต์ขึ้นอยู่กับประเภทของการรับส่งข้อมูลที่ได้รับดังนั้นการออกแบบ ตัวผมเองชอบการออกแบบของเหลวที่มีความกว้างร้อยละ 1000px และเหมาะสมmin-widthmax-width

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

สำหรับการอ้างอิงฉันมักจะคิดขั้นต่ำ 1024x768 ในขณะนี้

ในกรณีใด ๆ นี่คือบางส่วน: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php

ฉันคิดว่ามันขึ้นอยู่กับเนื้อหาของเว็บไซต์

ตัวอย่างเช่นหากคุณไม่ต้องการแถบด้านข้าง ฯลฯ และถ้าคุณชอบการออกแบบที่เรียบง่ายคุณสามารถตั้งค่าความกว้างของหน้าเว็บเป็น 500px

ดังนั้นฉันไม่เชื่อ (และไม่ชอบ) รูปแบบเกี่ยวกับขนาดของรูปแบบเว็บ

960 พิกเซลเป็นสิ่งที่ปลอดภัยที่สุดเนื่องจากทำงานบนหน้าจอ 1024x768 และมีที่ว่างสำหรับแถบเลื่อนและยังทำงานบน iPhone ในโหมดแนวนอน (เพราะพิกเซลเพิ่มหน้าจอ 480x320 เป็นสองเท่าของความละเอียด 960x640 และไม่มี แถบเลื่อน).

เมื่อพิจารณาว่าจอภาพไวด์สกรีนส่วนใหญ่ในปัจจุบันมีความละเอียด "1440x900" หรือกว้างกว่าฉันคิดว่าความกว้าง 1280 พิกเซลกลายเป็น "มาตรฐาน" มากขึ้นโดยเฉพาะอย่างยิ่งเมื่อแสดงภาพ

หมายเหตุ: ความกว้าง 1280 พิกเซลเป็นความกว้างของอัตราส่วน 4: 3 ที่เก่ากว่าหลายหน้าจอ 17 นิ้วและ 19 นิ้ว

960 พิกเซลเป็นความกว้างที่ดีที่สุดสำหรับเว็บไซต์