Phone Screen Dimensions for Popular Models

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 phone screen dimensions and resolutions so you can match your design to your viewers screen. 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.

Coding 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.