ขนาดหน้าจอต่างๆ ในการออกแบบเว็บไซต์แบบ Responsive Design

Knowledge_ResponsiveDesign2-1เวลาที่เราต้องการที่จะออกแบบเว็บไซต์เพื่อรองรับอุปกรณ์อื่นๆ ด้วยโดยเฉพาะอย่างยิ่ง จะมีบางมุมมองของอุปกรณ์ที่ผู้ใช้เปิดเว็บเรา เราจะต้องรู้ล่วงหน้าว่ามีขนาดในบ้าง ใน CSS3 นั้น ช่วยให้การจัดแต่งหน้าจอที่เฉพาะเจาะจงตามลักษณะเช่นความละเอียดหน้าจอและการวางแนวต่างๆ ด้านล่างนี้คือ หน้าจอของอุปกรณ์ที่ใช้เปิดเว็บซึ่งมีเกือบ 50 ของอุปกรณ์ที่เป็นที่นิยมมากที่สุดพร้อมกับความละเอียดและขนาดการแสดงผลของหน้าจอเหล่านั้นครับ

ยี่ห้อ รุ่น ขนาดจอ Resolution ประเภท
Acer Iconia Tab 10.1″ 1280×800 Tablet
Amazon Kindle Fire 7″ 1024×600 Tablet
Apple iPad 9.7″ 1024×768 Tablet
Apple iPad 2 9.7″ 1024×768 Tablet
Apple iPad 3 9.7″ 2048×1536 Tablet
Apple iPhone 3GS 3.5″ 480×320 Smartphone
Apple iPhone 4S 3.5″ 960×640 Smartphone
Apple iPhone 5 4″ 640×1136 Smartphone
ASUS Transformer TF101 10.1″ 1280×800 Tablet
ASUS Transformer Prime TF201 10.1″ 1280×800 Tablet
Barnes & Noble NOOK 7″ 1024×600 Tablet
BlackBerry Playbook 7″ 1024×600 Tablet
BlackBerry Torch 9800 3.2″ 480×360 Smartphone
BlackBerry Torch 9810 3.2″ 640×480 Smartphone
Colby Kyros 7″ 800×480 Tablet
HP TouchPad 9.7″ 768×1024 Tablet
HTC Amaze 4G 4.3″ 960×540 Smartphone
HTC Evo 3D 4.3″ 960×540 Smartphone
HTC Flyer 7″ 1024×600 Tablet
HTC Sensation 4G 4.3″ 960×540 Smartphone
HTC Thunderbolt 4.3″ 480×800 Smartphone
Lenovo IdeaPad A1 7″ 1024×600 Tablet
Lenovo ThinkPad 10.1″ 1280×800 Tablet
LG G2x 4G 4″ 800×400 Smartphone
LG G-Slate 8.9″ 768×1280 Tablet
Motorola Droid BIONIC 4.3″ 540×960 Smartphone
Motorola Droid RAZR 4.3″ 540×960 Smartphone
Motorola Droid Xyboard 10.1 10.1″ 1280×800 Tablet
Motorola Xoom 10.1″ 1280×800 Tablet
Nokia Lumia 900 4.3″ 480×800 Smartphone
Samsung Brightside 3.1″ 240×320 Smartphone
Samsung Epic 4G Touch 4.52″ 800×480 Smartphone
Samsung Exhibit 4G 3.5″ 480×800 Smartphone
Samsung Focus Flash 3.7″ 480×800 Smartphone
Samsung Galaxy S 4G 4″ 480×800 Smartphone
Samsung Galaxy S II 4.52″ 800×480 Smartphone
Samsung Galaxy S III 4.8″ 1280×720 Smartphone
Samsung Galaxy Tab 7″ 1024×600 Tablet
Samsung Galaxy Tab 7.7 7.7″ 1280×800 Tablet
Samsung Galaxy Tab 10.1 10.1″ 1280×800 Tablet
Samsung Gravity Smart 3.2″ 320×480 Smartphone
Samsung Sidekick 4G 3.5″ 800×480 Smartphone
Sony Tablet S 9.4″ 1280×800 Tablet
T-Mobile MyTouch 4G Slide 3.8″ 800×480 Smartphone
T-Mobile SpringBoard 7″ 1280×800 Tablet
Toshiba Thrive 10.1″ 1280×800 Tablet

 

Comments

comments