Skip to content

December 28, 2012

55

Web Design for Mobiles and Tablets – Viewport Sizes

The web is evolving in many ways and the biggest is the mobile web. Mobiles are now browsing the web faster than every before and websites need to be optimized for smaller screen sizes, 3G connections and HD screens in the palms of people hands. When developing a mobile website, whether it be for an iPhone, iPad, Nexus 7 or a Samsung Tab 2, nearly every device has a different resolution and screen size. This can make it difficult to design a website that works on every device out there.

 

So, to make a start on creating a suitable website for all mobile devices (mobiles and tablets) it is a good idea to look at what screen sizes and resolutions are out there. Then you can get a good idea of how much space you have to work with, and if you possibly have to create a few different versions of the site to adapt to all devices.

 

So, below we have a table of all current mobile devices, including tablets, with their name, screen size, resolution and operating system version. This will be updated regularly when new devices are released. Use the search function to search for a specific phone or sort the columns by clicking them to find minimum and maximum values.

 


Viewport Sizes

Device NamePlatformPixel DensityScreen SizePortrait Viewport WidthLandscape Viewport Width
Acer Iconia Tab A100Android166dpi7"8001280
Acer Iconia Tab A101Android170dpi7"6001024
Acer Iconia Tab A200Android160dpi10.1"8001280
Acer Iconia Tab A500Android149dpi10.1"6481280
Acer Iconia Tab A502Android149dpi10.1"8001280
Ainol Novo 7 Elf 2Android170dpi7"4961024
Apple iPadiOS132dpi9.7"7681024
Apple iPad 2iOS132dpi9.7"7681024
Apple iPad 3 (and 4)iOS264dpi9.7"7681024
Apple iPad MiniiOS163dpi7.9"7681024
Apple iPhone 3GiOS163dpi3.5"320480
Apple iPhone 3GSiOS163dpi3.5"320480
Apple iPhone 4iOS326dpi3.5"320480
Apple iPhone 4SiOS326dpi3.5"320480
Apple iPhone 5iOS326dpi4"320568
Apple iPod TouchiOS163dpi3.5"320480
Archos 70b (it2)Android??7"6001024
Archos 80G9Android160dpi8"7681024
Arnova 7 G2Android??7"480800
Arnova 7FG3Android??7"6401067
Arnova 8C G3Android125dpi8"8001067
Arnova 10b G3Android160dpi10.1"6001024
ASUS PadfoneAndroid??4.3"8001128
ASUS Transformer Pad TF300TAndroid??10.1"8001280
ASUS Transformer TF101Android149dpi10.1"8001280
BAUHN AMID-972XSAndroid??9.7"7681024
BlackBerry 9520Blackberry OS185dpi3.25"345691
BlackBerry Bold 9360Blackberry OS246dpi2.44"320N/A
BlackBerry Bold 9780Blackberry OS246dpi2.44"480N/A
BlackBerry Bold 9790Blackberry OS246dpi2.45"320N/A
BlackBerry Bold 9900Blackberry OS287dpi2.8"356N/A
BlackBerry Curve 9300Blackberry OS246dpi2.45"311N/A
BlackBerry Curve 9320Blackberry OS164dpi2.44"320N/A
BlackBerry Curve 9380Blackberry OS188dpi3.2"320N/A
BlackBerry PlayBookBlackberry Tablet OS169dpi7"6001024
BlackBerry Torch 9800Blackberry OS187.5dpi3.2"320480
BlackBerry Torch 9810Blackberry OS250dpi3.2"320480
BlackBerry Z10Blackberry OS10355dpi4.2"345521
Google Nexus 5Android445dpi4.95"360598
HP TouchpadAndroid132dpi9.7"7681024
HP VeerWebOS197dpi2.6"320545
HTC 7 MozartWindows Phone 7252dpi3.7"320480
HTC 7 TrophyWindows Phone 7245dpi3.8"320480
HTC DesireAndroid252dpi3.7"320533
HTC Desire CAndroid164dpi3.5"320480
HTC Desire HDAndroid216dpi4.3"320533
HTC Desire ZAndroid252dpi3.7"480800
HTC Evo 3DAndroid256dpi4.3"540960
HTC LegendAndroid??3.2"320480
HTC One SAndroid256dpi4.3"360640
HTC One VAndroid252dpi3.7"320533
HTC One XLAndroid260dpi4.7"360640
HTC Sensation XLAndroid198.5dpi4.7"360640
HTC Titan 4GWindows Phone 7198.5dpi4.7"320480
HTC Velocity 4GAndroid245dpi4.5"360640
HTC Wildfire SAndroid180dpi3.2"320480
HTC Windows Phone 8XWindows Phone 8341dpi4.3"320480
Huawei U8650Android165dpi3.5"320480
Kindle 3Kindle167dpi6"600N/A
Kindle Fire HD 7Android216dpi7"533801
Kindle Fire HD 8.9Android254dpi8.9"533801
Kindle Fire HDX 7"Android323dpi7"600902
Kindle PaperwhiteKindle212dpi6"758N/A
Kobo eReader TouchAndroidN/A (E Ink)6"600N/A
LG Optimus 2XAndroid233dpi4"320533
LG Optimus L3Android125dpi3.2"320427
LG Optimus PadAndroid168dpi8.9"7681280
LG Viewty KU990Java155dpi3"240400
Microsoft Surface (RT)Windows RT148dpi10.6"7681366
Motorola DefyAndroid265dpi3.7"320569
Motorola Droid3Android275dpi4"360599
Motorola Droid RazrAndroid256dpi4.3"360640
Motorola MilestoneAndroid265dpi3.7"320569
Motorola Razr HD 4GAndroid312dpi4.7"360598
Motorola Razr M 4GAndroid312dpi4.7"360598
Motorola XoomAndroid149dpi10.1"8001280
Motorola Xoom 2Android149dpi10.1"8001280
Nexus 4Android318dpi4.7"384598
Nexus 7Android216dpi7"603966
Nexus SAndroid233dpi4"320533
Nokia 300Nokia167dpi2.4"234N/A
Nokia 500Symbian229dpi3.2"360640
Nokia 700Symbian229dpi3.2"240427
Nokia 2700S40200dpi2"240N/A
Nokia Lumia 520Windows Phone 8233dpi4"320480
Nokia Lumia 610Windows Phone 7252dpi3.7"320480
Nokia Lumia 710Windows Phone 7252dpi3.7"320480
Nokia Lumia 800Windows Phone 7252dpi3.7"320480
Nokia Lumia 820Windows Phone 8217dpi4.3"320480
Nokia Lumia 900Windows Phone 7217dpi4.3"320480
Nokia Lumia 920Windows Phone 8332dpi4.5"320480
Nokia Lumia 1020Windows Phone 8332dpi4.5"320480
Nokia Lumia 1520Windows Phone 8367dpi6"320480
Nokia N95S60154dpi2.6"240N/A
Nokia N900Naemo267dpi3.5"480800
Panasonic Toughpad A1Android127dpi10.1"7681024
Samsung Galaxy AceAndroid165dpi3.5"320480
Samsung Galaxy Ace 2Android246dpi3.8"320533
Samsung Galaxy GrandAndroid187dpi5"480800
Samsung Galaxy NoteAndroid285dpi5.3"400640
Samsung Galaxy Note 2Android267dpi5.5"360640
Samsung Galaxy Note 10.1Android149dpi10.1"8001280
Samsung Galaxy S2Android217dpi4.3"320533
Samsung Galaxy S3Android306dpi4.8"360640
Samsung Galaxy S3 MiniAndroid233dpi4"360640
Samsung Galaxy S4Android441dpi5"360640
Samsung Galaxy S4 MiniAndroid256dpi4.3"360640
Samsung Galaxy Tab 2 7.0Android170dpi7"6001024
Samsung Galaxy Tab 7Android170dpi7"6001024
Samsung Galaxy Tab 8.9Android170dpi8.9"8001280
Samsung Galaxy Tab 10.1Android149dpi10.1"8001280
Samsung Galaxy Tab 10.1Android149dpi10.1"8001280
Sony Xperia E DualAndroid164dpi3.5"320480
Tesco HudlAndroid242dpi7"600799
Windows Surface ProWindows 8207dpi10.6"10801920

 

All specifications above can change per phone such as the dpi (dots per inch) values as some devices allow the user to increase or decrease this setting. This could affect the viewport sizes. Any viewport sizes with “N/A” indicate that the device will not operate in this orientation.

 

This table will be updated regularly when new devices are released. But if you have a device that is not listed, let us know and we will add it to the list, or if you have a request for a certain phone specification, leave a comment below and we will try to find the viewport sizes for you.

55 Comments Post a comment
  1. Dec 28 2012

    As a web designer myself, it is can certainly be rather frustrating developing site to display correctly on all types of screen sizes!

    Reply
    • martin
      Dec 30 2012

      Yeah can be very frustrating. But hopefully this can give a good guide to which devices fit into which tolerances :)

      Reply
  2. Boopathy
    Dec 30 2012

    Thank you so much for this collection of device information. Very useful for mobile website and app developers. Thank you.

    Reply
    • steve sefton
      Feb 11 2013

      is this the same boopathy I met on a project in Glasgow years ago?

      Reply
  3. Vipul Vyas
    Jan 25 2013

    Good Work heartly appreciate your efforts

    Reply
  4. Fantastic bit of view port size app information, a real god send, Ive been looking all over something like this, !

    Reply
  5. martin
    Feb 20 2013

    Table Updated with details about BlackBerry Z10

    Reply
  6. Aditya Jain
    Mar 7 2013

    please find out for galaxy grand

    Reply
    • martin
      Mar 7 2013

      Hi Aditya,
      I have updated the table with information for Samsung Galaxy Grand Viewport. 480px portrait, 800px landscape. 5″ screen. 187dpi.

      Hope this helps.

      Reply
  7. Hapexi
    Apr 13 2013

    Hello there.. I took me too long to find this page.. I just got a javascript for my page so I can check viewports of devices when loading the page. There was a small conflict with your table and the script, which said that my nexus 7 has viewport width 599 in portrait and after trying it out with my media queries I can confirm that the actual width is 599px.

    If you want to set up your own test script I suggest this one http://www.codeproject.com/Tips/183715/Browsers-View-port-Width-Height-using-Javascript has worked well for me. Measures the viewport and pop ups a message telling the measures

    Reply
  8. May 7 2013

    Hello,

    Amazing table ! Thank you so much.

    Can I use this list for my blog ?

    Best regards.

    Reply
    • martin
      May 22 2013

      Hi Cedric,
      You are welcome to link to this blog post.

      Reply
  9. Jun 4 2013

    Thank you so much for this information! It really helps for the responsive site development. :)

    Reply
  10. Marius
    Jun 11 2013

    Impressive work and keep it up! Would like to bring to your attention Sony Xperia U, Sony Xperia S, Sony Xperia P. Take care and once again good work!

    Reply
  11. Jun 14 2013

    thank you, I try to find this so many times. This help me a lot. I must bookmark this page :)

    Reply
  12. Simon Oram
    Jun 24 2013

    Hi there—

    Another one for your list:

    Sony Xperia S
    Android
    324ppi
    4.3″
    Portrait Width: 360
    Landscape Width: 640

    =)

    Reply
  13. Jun 26 2013

    This was indeed a great resource. I am developing a phonegap app and biggest problem was to know about different devices available for Android along with their details. By this blog i can easily develop css depending upon the device width.

    Great work

    Reply
  14. Jun 29 2013

    Thanks for this list. I have been using it to help me convince paper trained graphic designers that web design cannot be pixel perfect, or indeed fixed in any way. Content focused, responsive design with fluid layout between the breakpoints is a much harder concept to understand and implement, but good designers thrive on challenges. Once they understand the constraints and advantages of web technology they can become good web designers, but without this they will continue to try to squeeze paper based, fixed-size, image supported designs into any device.

    Reply
  15. ArroGans
    Aug 20 2013

    iPad 3 and 4 are listed with incorrect pixel counts.

    2048 x 1536 are the correct numbers.

    Reply
    • martin
      Aug 29 2013

      Hi ArroGans,
      This table is not for resolution, it is for Viewport size.

      Reply
  16. Aw, this was an incredibly good post. Taking a
    few minutes and actual effort to generate a really good
    article… but what can I say… I procrastinate a lot
    and never manage to get anything done.

    Reply
  17. Vipin
    Sep 26 2013

    Super stuff.. very nice info indeed.

    I needed one more small info. I needed dimension for a video for mobile website.

    Do i require 2 diffrent sized videos for web and mobile. or can i use the same mobile on both devices ?

    If so whats the dimension of the video?

    Reply
  18. camilo
    Nov 14 2013

    Hi

    I’m a newbie aand at a loss with mobiles. My page works fine in an iPod Touch, but not in a Samsung Galaxy Mini. I guess this is because the samsung has a smaller screen. I have been trying to solve the problem with a different stylesheet but cannot understand if that works and MOST OF ALL how to redirect the html. conditional statement?
    Hope that you can thow me some light…

    Reply
    • martin
      Nov 15 2013

      Hi,

      The iPod Touch has a width of 320px where the Galaxy Mini has a view port width of 240px. This could be your problem.

      Reply
  19. Nov 17 2013

    Would be great if this chart included the new devices like the iPad Air ;)

    Reply
    • Jan 13 2014

      iPad Air
      portrait width 768px
      landscape width 1024px

      264dpi

      Don’t quote me on any of that ;)

      Reply
  20. martin
    Dec 4 2013

    New Devices Added:
    Google Nexus 5
    Nokia Lumia 520
    Samsung Galaxy S4 Mini
    Kindle Fire HDX

    Enjoy.

    Reply
  21. Dec 6 2013

    HTC One V is 252dpi

    Reply
    • martin
      Dec 7 2013

      Thank you!
      Table updated

      Reply
  22. martin
    Dec 18 2013

    Table updated with specs for Nokia Lumia 1020 and Nokia Lumia 1520

    Reply
  23. Andreas
    Dec 19 2013

    Sorting of columns with numeric values, e.g. Landscape Vieport Width, did not work correct. Possible solution is sType http://www.datatables.net/usage/columns#sType

    Reply
  24. Jan 8 2014

    Do you mind if I quote a couple of your articles
    as long as I provide credit and sources back to your site?
    My website is in the exact same area of interest as yours
    and my users would truly benefit from some of the information
    you provide here. Please let me know if this ok with you.
    Many thanks!

    Reply
    • martin
      Jan 9 2014

      Hi,

      That is not a problem at all. Let me know where you reference, that would be great.

      Reply
  25. Jan 13 2014

    Awesome stuff, exactly what I needed to create some custom sized widgets for Responsive Web testing in my browser (or more accurately, added to a widget that someone much smarter than me already created).

    I wish manufacturers would list the viewport size on their product specification pages.

    Thanks a bunch!

    Reply
  26. smilexu
    Jan 19 2014

    Does dpi mean dot per inch and ppi is pixel density unit mean pixel per inch ?

    Reply
    • martin
      Jan 19 2014

      Yes that is correct

      Reply
  27. Jan 25 2014

    I like it whenever people get together and share ideas.
    Great blog, continue the good work!

    Reply
  28. Please add the following two Windows Phone 8 devices:

    Nokia Lumia 1520 368dpi 6″ 1080 1920
    Nokia Lumia 1320 245dpi 6″ 720 1280

    Awesome resource, thanks!

    Reply
  29. KM
    Mar 10 2014

    Hey what is the difference betwwen screen resolution and viewport

    Reply
  30. Mar 26 2014

    What about Internet cell phone watch/android watch? They seem to say 320 x 320 but they appear much smaller. To be funny, in school I’m studying responsive web design, would a 320 x 320 @media set up really be able to be viewed in these tiny watches?

    Reply
    • martin
      Mar 26 2014

      Good Question!
      Will certainly have a look into this.

      Reply
  31. Hello! I simply wish to give you a huge thumbs up for your excellent information you have got right here
    on this post. I am coming back to your site for more soon.

    Reply

Trackbacks & Pingbacks

  1. Convert a 960 Grid Website to a Responsive Design | Premium Design Works | Seattle, WA
  2. Vanadium – Mobile and tablet viewport sizes
  3. Theme Tweaks & Responsive Design | Kynosarges Weblog
  4. Optimizing webpages for mobile devices, part 1: the viewport meta tag | Frugihoyi's Blog
  5. How to create mobile backgrounds?
  6. Going Mobile with ADF – Running ADF Faces on Mobile Phones and Tablets
  7. 25-11-2013 | Stage jaar 3 CMD
  8. Developing for the Nokia Lumia 1020 and Lumia 1520 | i-Skool
  9. 2014 Yılı ve Mobil SEO Hakkında Bilinmesi Gerekenler
  10. viewport size | 2gcomputer's Blog
  11. Desenvolvimento Responsivo e Viewports | BlogUp
  12. Desenvolvimento Responsivo e Viewport |
  13. Media queries: tudo que você precisa saber - TutsUP

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

Links:louboutin uk saleabercrombie pas cherRalph Lauren Pas Chernike free run 2