CSS

Phone Screen Dimensions for Popular Models

By 5 mins

In today’s world, there are many devices from which people can choose, and it can be daunting if you try to put and build for the best experience on all devices. However, when designing websites and mobile devices, it is important to be aware of the most popular screen sizes and resolutions. An optimized, responsive website makes it easier for users to flow and ultimately pleases your audience.

Phone Screen Dimensions vs Viewing Area

When you purchase a device, both the screen size and the resolution specified in the specifications are often displayed. Screen sensitivity is the diagonal measurement of the screen diagonally in inches. This should not be confused with the resolution, which is the number of pixels on the screen, often displayed in terms of width in height (i.e., 1024×768). Because devices of the same screen size can have very different resolutions, developers use display windows when creating easy-to-use mobile pages. Viewports have smaller versions of resolution, which allows you to view websites on different devices more consistently. Viewports are often more standardized and have a lower resolution than resolution.

Although desktop and laptop monitors are horizontal (higher), many mobile devices can be rotated to display sites in horizontal and vertical orientation (higher than width). This means that designers and developers have to design with these differences in mind. While desktop and laptop monitors are horizontal (higher), many mobile devices can be rotated to display sites in horizontal and vertical orientation (higher than width). That means designers and developers have to design with these differences in mind.

Need help determining if your site is responsive? Use our free responsive viewport tool.

Phone Screen DimensionsCoding for different Phone Screen Dimensions

It would be almost impossible for companies to design each device individually. Instead, developers often group responsive projects:

Group styles into the most common sizes for phones, tablets, and desktops. In this case, anything larger than 7 inches is typically displayed with a desktop resolution or… Use breakpoints (defined by the width of the pixels, which the display will adjust according to the screen size) depending on the design and location. Sometimes the developer can combine both methods if he or she finds it necessary. It is recommended that you start by grouping the typical device sizes.

If you are a developer and want to create the styles needed to work with mobile or responsive style, we have included a fragment of CSS below that may help. It is important to note that these breakpoints are not fixed for all sites and should only be used as a guide to get started:

Examples:

media and (Maximum width: 991 pixels) {
    ** "The beginning of great styles of pills
}

media and (maximum width: 767 pixels) {
    ** The beginning of medium styles of pills
}

screen @media and (maximum width: 479px) { 
    ** "The beginning of phone styles
}

What are the Most Popular Screen Dimensions?

Knowing that it is important to consider different devices when designing websites, we have compiled a list of the most modern devices with corresponding pixel sizes and display windows, which is given below. This is a condensed list, you can find a more comprehensive list which includes pixel density, physical and CSS resolutions (pixels per square inch, ‘ppi’) here.

 namephys.
width
phys.
height
css
width
css
height
Apple iPhone X11252436375812
Apple iPhone 6+, 6s+, 7+, 8+10801920414736
Apple iPhone 7, iPhone 87501334375667
Apple iPhone 6, 6s7501334375667
Apple iPhone 56401136320568
Apple iPhone 4640960320480
Apple iPhone 3320480320480
Apple iPod Touch6401136320568
LG G514402560360640
LG G414402560360640
LG G314402560360640
LG Optimus G7681280384640
Samsung Galaxy S8+14402960360740
Samsung Galaxy S814402960360740
Samsung Galaxy S7, S7 edge14402560360640
Samsung Galaxy S614402560360640
Samsung Galaxy S510801920360640
Samsung Galaxy S410801920360640
Samsung Galaxy S4 mini540960360640
Samsung Galaxy S37201280360640
Samsung Galaxy S3 mini480800320533
Samsung Galaxy S2480800320533
Samsung Galaxy S480800320533
Samsung Galaxy Nexus7201200360600
Samsung Galaxy Note 814402960360740
Samsung Galaxy Note 414402560360640
Samsung Galaxy Note 310801920360640
Samsung Galaxy Note 27201280360640
Samsung Galaxy Note8001280400640
LG Nexus 510801920360640
LG Nexus 47681280384640
Microsoft Lumia 152010801920432768
Microsoft Lumia 10207681280320480
Microsoft Lumia 9257681280320480
Microsoft Lumia 9207681280320480
Microsoft Lumia 900480800320480
Microsoft Lumia 8307201280320480
Microsoft Lumia 620480800320480
Motorola Nexus 614402560412690
HTC One10801920360640
HTC 8X7201280320480
HTC Evo 3D540960360640
Sony Xperia Z310801920360598
Sony Xperia Z10801920360640
Sony Xperia S7201280360640
Sony Xperia P540960360640
Xiaomi Redmi Note 510802160393786
Xiaomi Mi 410801920360640
Xiaomi Mi 310801920360640
Lenovo K90010801920360640
Pantech Vega n°610801920360640
Blackberry Leap7201280390695
Blackberry Passport14401440504504
Blackberry Classic720720390390
Blackberry Q10720720346346
Blackberry Z307201280360640
Blackberry Z107681280384640
Blackberry Torch 9800360480360480
ZTE Grand S10801920360640
ZTE Open (Firefox OS)480720320480
Samsung Galaxy Note 914402960360740
Samsung Galaxy Note 1010802280360718
Samsung Galaxy Note 10+10802280360718
Samsung Galaxy S914402960360740
Samsung Galaxy S9+14402960360740
Samsung Galaxy S1014403040360740
Samsung Galaxy S10+14403040360740
Apple iPad Pro2048273210241366
Apple iPad Pro 9.7153620487681024
Apple iPad 3, 4, Air, Air2153620487681024
Apple iPad 1, 276810247681024
Apple iPad mini 2, 3, 4153620487681024
Apple iPad mini76810247681024
Samsung Galaxy Tab 3 10"80012808001280
Samsung Galaxy Tab 2 10"80012808001280
Samsung Galaxy Tab (8.9")80012808001280
Samsung Galaxy Tab 2 (7")60010246001024
Samsung Nexus 10160025608001280
HTC Nexus 9153820487681024
Asus Nexus 7 (v2)10801920600960
Asus Nexus 7 (v1)8001280604966
LG G Pad 8.312001920600960
Amazon Kindle Fire HD 8.9120019208001280
Amazon Kindle Fire HD 78001280480800
Amazon Kindle Fire60010246001024
Microsoft Surface Pro 31440216010241440
Microsoft Surface Pro 2108019207201280
Microsoft Surface Pro108019207201280
Microsoft Surface76813667681366
Blackberry Playbook60010246001024
Google Glass640360427240