Responsive และข้อมูลอ้างอิงความกว้างหน้าจอในอุปกรณ์ต่าง ๆ

วันนี้ได้รับมอบหมายงานเกี่ยวกับ Responsive มา โดยการทำเว็บไซต์ที่ยังไม่รองรับการทำงานแบบนี้ ปรับเปลี่ยนให้สามารถทำงานได้ในลักษณะความหมายที่กำหนดมา ถอนหายใจ 1 ครั้ง เพราะเป็น TYPO3 ไงหล่ะ แล้วเริ่มวางแผนการทำงาน โดยการตั้งโจทย์เป็นข้อ ๆ ดังนี้

1) ความกว้างของหน้าจอของอุปกรณ์นั้น มีอะไรบ้าง มันกว้างเท่าไหร่ x เท่าไหร่
2) วิธีการเขียนโค้ดให้สามารถทำงานได้แบบยืดหยุ่น ไม่ต้องแก้ไรมาก เพียง import เข้าไปกำหนดเลยได้ไหม จะได้ไม่กระทบต้องไป map ใหม่ให้เสียเวลา

แล้วก็เริ่มเปิดเครื่องมือค้นหา เลยไปเจอเว็บไซต์นี้ ยอดเยี่ยมไปเลย ตรงเผง มันก็คือการตอบโจทย์ข้อ 1) ของเรานั่นเอง ไปดูกันว่ายังไงกันบ้าง

การแสดงผลหน้าจอ กxย (px) => อุปกรณ์

  • 2880 x 1800 => 15-inch Apple MacBook Pro with Retina display
  • 2560 x 1700 => Google Chromebook Pixel
  • 2560 x 1600 => Samsung Google Nexus 10 / 13-inch Apple MacBook Pro with Retina display
  • 2560 x 1440 => 27-inch Apple iMac 10,2 / 11,1 / 11,3 / 12,2 (Late 2009 – 2012)
  • 2048 x 1536 => Apple iPad 3 / Apple iPad 4 (Apple iPad with Retina display) 1920 x 1280 => NOOK HD+ Tablet
  • 1920 x 1200 => Sony Xperia Tablet Z / Asus Transformer Pad Infinity & Transformer Prime TF700T / 24-inch Apple iMac 6,1 / 7,1 / 8,1 / 9,1(Late 2006 – Early 2009)
  • 1920 x 1080 => Large 16:9 desktop screen resolution / HTC One / Samsung Galaxy S4 / Sony Xperia Z & Xperia ZL / Asus PadFone Infinity / LG Optimus G Pro / Amazon Kindle Fire HD 8.9 / Microsoft Surface with Windows 8 Pro / Acer Iconia W700 & Aspire S7 / Sony Vaio Duo 11 / Dell XPS 12 / Acer Aspire S5 / Asus Zenbook Prime / Apple iMac 10,1 / 11,2 / 12,1 (Late 2009 – Mid 2011)
  • 1680 x 1050 => Apple iMac 4,1 / 5,1 / 7,1 / 8,1 / 9,1 (Early 2006 – Early 2009)
  • 1600 x 1200 => Large 4:3 desktop screen resolution
  • 1600 x 900 => Medium 16:10 desktop/laptop screen resolution / Apple Macbook Air
  • 1440 x 900 => Medium 16:10 desktop/laptop screen resolution / Barnes & Noble NOOK HD / Apple Macbook Air / Apple iMac 4,1 / 5,2 (Early 2006 – Late 2006)
  • 1366 x 768 => Small 16:9 desktop/laptop screen resolution / Asus VivoTab RT / Samsung N350 / Microsoft Surface with Windows RT / Apple Macbook Air / Samsung Series 3 Chromebook / Acer C7 Chromebook / Samsung Series 5 Chromebook / ASUS Eee PC VX6 Lambourghini
  • 1280 x 1024 => Standard 4:3 desktop screen resolution
  • 1280 x 800 => Asus PadFone 2 / Samsung Galaxy Note / Kindle Fire HD / Asus Google Nexus 7, Memo & Fonepad / Samsung Galaxy Tab 7.7 / Samsung Galaxy Note 8.0 / Motorola Droid XYBOARD / Samsung Galaxy Tab 8.9 / Sony Xperia Tablet S / Samsung Galaxy Note 10.1, Galaxy Tab 10.1 & Galaxy Tab 2 10.1 / Viewsonic ViewPad 10pi / Motorola Zoom / Asus Memo Pad Smart 10, Transformer, Transformer Prime TF201 & Transformer Pad
  • 1280 x 768 => BlackBerry Z10 / Nokia Lumia 920 / LG Optimus G / LG Google Nexus 4 / LG Optimus 4X HD / Samsung Galaxy Camera / LG Optimus Pad
  • 1280 x 720 => Sony Xperia S / HTC Windows Phone 8X / LG Optimus LTE, Optimus True HD LTE & Optimus 4G LTE / Sony Xperia T / Samsung Galaxy Nexus, Galaxy S II HD LTE, Galaxy Pop, Galaxy Premier & Galaxy S II Skyrocket HD / LG Optimus G, Optimus 4X HD, Optimus LTE2 & Optimus F7 / HTC One X & X+ & XL / Motorola Droid RAZR HD & Droid RAZR MAXX HD / Samsung Galaxy S III / Samsung Galaxy Note II
  • 1024 x 768 => Apple iPad Mini / LG Intuition, Optimus Vu & Optimus Vu II / Apple iPad 1 & 2 / HP TouchPad / Viewsonic ViewPad 10e & ViewPad E100
  • 1024 x 600 => Standard netbook/tablet resolution / HTC EVO View 4G / Samsung Galaxy Tab, Galaxy Tab 7.0 Plus & Galaxy Tab 2 7.0 / Viewsonic ViewPad E72 / Blackberry Playbook / Amazon Kindle Fire / Asus Memo Pad
  • 1136 x 640 => Apple iPhone 5 / Apple iPod Touch (5th generation)
  • 960 x 640 => Apple iPhone 4 & 4S / Apple iPod Touch (4th generation)
  • 960 x 540 => HTC EVO Design 4G / Sony Xperia P / Motorola Atrix / HTC Sensation, Sensation 4G, Sensation HTC Evo 3D, Sensation XE, Evo 4G+, Desire HD2 & One S / LG Optimus F5 / Motorola Bionic, Photon Q, Droid RAZR, Droid RAZR i, Droid RAZR M & Droid RAZR MAXX / Samsung Galaxy S4 mini / Asus PadFone / HTC One VX / LG Optimus L9
  • 854 x 480 => Sony Xperia ray / Sony Xperia U / Sony Xperia sola, Xperia pro, Xperia neo & Xperia neo V / Motorola Milestone and Milestone 2 / Nokia N9 / Sony Xperia X10, Xperia PLAY & Xperia J / Sony Xperia arc & Xperia arc S
  • 800 x 480 => LG Optimus Q & Optimus 7Q / Asus P835 / Blackberry Storm 3, Torch 9850 & Torch 9860 / Nokia Lumia 610, 710 & 800 / HTC Desire, Desire Z, Desire S & One V / Samsung Galaxy W / Samsung Galaxy Ace 2 / Blackberry Storm 3 / LG Optimus 7, Optimus Mach & Optimus Sol / Nokia Lumia 510 & 520 / Samsung Galaxy I, Galaxy S, Galaxy S Plus, Galaxy S Advance, Galaxy SL, Galaxy S Duos, Galaxy Xcover 2, Galaxy Beam, Nexus S, Captivate Glide & Galaxy S III mini / HTC Desire X, HTC Desire V, Desire VC, Desire VT, Desire U & Windows Phone 8S / LG Optimus 2X, Optimus EX, Optimus L5 II, Optimus Q2 & Optimus Black / T-Mobile G2x / Asus E600 / Nokia Lumia N800 & N810 / Nokia Lumia 720, 820 & 900 / Samsung Galaxy S II & Galaxy S II Plus / HTC Evo 4G, Desire HD, Desire SV, One SC, One ST, One SU & One SV / LG Optimus 3D, Optimus 3D Cube, Optimus Big, Optimus LTE Tag & Optimus L7 IID / Samsung Galaxy S II Duos, Galaxy S II X & Galaxy S II Epic 4G Touch / HTC Sensation XL / Samsung Galaxy Grand / Viewsonic Viewpad 7
  • 640 x 480 => Blackberry Bold 9900 & Bold Touch 9930 / Blackberry Torch 9810 / LG Optimus Z
  • 640 x 360 => Sony Ericsson Vivaz & Vivaz Pro / Nokia 500 & 5800 XpressMusic / Nokia N8, N97, E7 and X6 / Nokia E7
  • 480 x 360 => BlackBerry Curve 8900 / BlackBerry Curve 8980, 9350, 9360, 9370, Bold 9700 & 9780 / BlackBerry Bold 9790 / BlackBerry Curve 9380, Bold 9650 & Torch 9800 / BlackBerry Curve Touch, Storm & Storm2
  • 480 x 320 => BlackBerry Bold 9000 / Sony Xperia min, Xperia mini pro & Xperia active / LG Optimus / LG Optimus One, Optimus S, Optimus M, Optimus Slider, Optimus Net, Optimus T, Optimus Chic & Optimus Net Dual / Sony Xperia tipo / Sony Live with Walkman / Apple iPhone 3G & 3GS / Apple iPod touch (1st, 2nd & 3rd generation) / Samsung Galaxy Ace, Galaxy Ace Advance, Galaxy Fame & Galaxy Ace Duos / HTC Desire C / Sony Xperia E, Xperia miro & Xperia go / LG Optimus Hub, Optimus Chat, Optimus Elite, Optimus M+ & Motion 4G / Samsung Galaxy Ace Plus / LG Optimus L5 & Optimus L5 Dual
  • 400 x 240 => Samsung Star / Tocco & Star II / Sony Mix Walkman Phone / Sony Ericsson txt pro / Nokia Asha 305, 306, 310 & 311 / Samsung Star II DUOS
  • 320 x 240 => Nokia E71 / Blackberry Curve 9220 & 9320 / Blackberry Curve 8310, 8520, 8530, 3G 9300 & 3G 9330 / Blackberry Curve 8300, 8320 & 8330 / Sony Ericsson txt / Samsung Galaxy Y & Galaxy Chat / HTC Wildfire / LG Optimus L3 & L3 II

ก็ลองพิจารณากันเอาเองว่าจะทำให้เว็บ support ที่ความกว้างเท่าไหร่กันบ้าง

ขอบคุณที่มาจาก http://spirelightmedia.com/resources/responsive-design-device-resolution-reference | http://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones | http://www.gsmarena.com

Posted by:

Kickstarter
Administrator

Leave A Comment

Your email address will not be published. Required fields are marked (required):

Human answer! *

Back to Top