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.

  name phys.
width
phys.
height
css
width
css
height
Apple iPhone X 1125 2436 375 812
Apple iPhone 6+, 6s+, 7+, 8+ 1080 1920 414 736
Apple iPhone 7, iPhone 8 750 1334 375 667
Apple iPhone 6, 6s 750 1334 375 667
Apple iPhone 5 640 1136 320 568
Apple iPhone 4 640 960 320 480
Apple iPhone 3 320 480 320 480
Apple iPod Touch 640 1136 320 568
LG G5 1440 2560 360 640
LG G4 1440 2560 360 640
LG G3 1440 2560 360 640
LG Optimus G 768 1280 384 640
Samsung Galaxy S8+ 1440 2960 360 740
Samsung Galaxy S8 1440 2960 360 740
Samsung Galaxy S7, S7 edge 1440 2560 360 640
Samsung Galaxy S6 1440 2560 360 640
Samsung Galaxy S5 1080 1920 360 640
Samsung Galaxy S4 1080 1920 360 640
Samsung Galaxy S4 mini 540 960 360 640
Samsung Galaxy S3 720 1280 360 640
Samsung Galaxy S3 mini 480 800 320 533
Samsung Galaxy S2 480 800 320 533
Samsung Galaxy S 480 800 320 533
Samsung Galaxy Nexus 720 1200 360 600
Samsung Galaxy Note 8 1440 2960 360 740
Samsung Galaxy Note 4 1440 2560 360 640
Samsung Galaxy Note 3 1080 1920 360 640
Samsung Galaxy Note 2 720 1280 360 640
Samsung Galaxy Note 800 1280 400 640
LG Nexus 5 1080 1920 360 640
LG Nexus 4 768 1280 384 640
Microsoft Lumia 1520 1080 1920 432 768
Microsoft Lumia 1020 768 1280 320 480
Microsoft Lumia 925 768 1280 320 480
Microsoft Lumia 920 768 1280 320 480
Microsoft Lumia 900 480 800 320 480
Microsoft Lumia 830 720 1280 320 480
Microsoft Lumia 620 480 800 320 480
Motorola Nexus 6 1440 2560 412 690
HTC One 1080 1920 360 640
HTC 8X 720 1280 320 480
HTC Evo 3D 540 960 360 640
Sony Xperia Z3 1080 1920 360 598
Sony Xperia Z 1080 1920 360 640
Sony Xperia S 720 1280 360 640
Sony Xperia P 540 960 360 640
Xiaomi Redmi Note 5 1080 2160 393 786
Xiaomi Mi 4 1080 1920 360 640
Xiaomi Mi 3 1080 1920 360 640
Lenovo K900 1080 1920 360 640
Pantech Vega n°6 1080 1920 360 640
Blackberry Leap 720 1280 390 695
Blackberry Passport 1440 1440 504 504
Blackberry Classic 720 720 390 390
Blackberry Q10 720 720 346 346
Blackberry Z30 720 1280 360 640
Blackberry Z10 768 1280 384 640
Blackberry Torch 9800 360 480 360 480
ZTE Grand S 1080 1920 360 640
ZTE Open (Firefox OS) 480 720 320 480
Samsung Galaxy Note 9 1440 2960 360 740
Samsung Galaxy Note 10 1080 2280 360 718
Samsung Galaxy Note 10+ 1080 2280 360 718
Samsung Galaxy S9 1440 2960 360 740
Samsung Galaxy S9+ 1440 2960 360 740
Samsung Galaxy S10 1440 3040 360 740
Samsung Galaxy S10+ 1440 3040 360 740
Apple iPad Pro 2048 2732 1024 1366
Apple iPad Pro 9.7 1536 2048 768 1024
Apple iPad 3, 4, Air, Air2 1536 2048 768 1024
Apple iPad 1, 2 768 1024 768 1024
Apple iPad mini 2, 3, 4 1536 2048 768 1024
Apple iPad mini 768 1024 768 1024
Samsung Galaxy Tab 3 10" 800 1280 800 1280
Samsung Galaxy Tab 2 10" 800 1280 800 1280
Samsung Galaxy Tab (8.9") 800 1280 800 1280
Samsung Galaxy Tab 2 (7") 600 1024 600 1024
Samsung Nexus 10 1600 2560 800 1280
HTC Nexus 9 1538 2048 768 1024
Asus Nexus 7 (v2) 1080 1920 600 960
Asus Nexus 7 (v1) 800 1280 604 966
LG G Pad 8.3 1200 1920 600 960
Amazon Kindle Fire HD 8.9 1200 1920 800 1280
Amazon Kindle Fire HD 7 800 1280 480 800
Amazon Kindle Fire 600 1024 600 1024
Microsoft Surface Pro 3 1440 2160 1024 1440
Microsoft Surface Pro 2 1080 1920 720 1280
Microsoft Surface Pro 1080 1920 720 1280
Microsoft Surface 768 1366 768 1366
Blackberry Playbook 600 1024 600 1024
Google Glass 640 360 427 240