Skip to main content
#Web Design

What is my screensize?

Sean O'Brien February 6February 15th, 2021
What is my screensize?

What is my screen resolution?

We recently built a free tool that can give you the exact dimensions of your screensize. These numbers represent the viewport size of your current screen, which is the visible display area of your screen. This is often slightly smaller than your screen resolution. A web design viewport is defined as a rectangular area (measured in pixels) that is displayed on the screen and determines how the content is arranged and where to scroll through the text wrappers or windows to see the entire web page.

Is the viewport the same as the screen resolution?

For most devices, the resolution/size of the screen is the same as the viewport size. This is true for most desktop computers and laptops, but is almost never true for mobile devices and tablets! Many phone browsers scale web pages to a larger screen width to put them on the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and out of the pages to see the bit they want to see. For example, while the screen width of a device can be 320px, the viewport can be 980px wide. In this case, a web page designed for 980px or less will fit across the entire screen. I am typically using 1000px and 690px as the main breakpoints on websites I design as that seems to cover a lot of good ground for most modern devices.

Screen resolution is not a useful indicator for browser window size.

Desktop screens have increased significantly over the last decade, but browser display screens (the visible area in the browser window) pretty much have not. A little while back, CSS-Tricks discovered that only 1% of users have full screen navigation. While only 9% of visitors to this site had a screen width of less than 1200px. Their take is that even though lots of users run big monitors these days, not all of them are viewing websites in ‘full screen resolution’, therefore the viewport size of the website is much smaller than the screen resolution of their monitor.

What is my screensize?

Where the confusion begins with screensizes and viewports is usually due to phone manufacturers misleading consumers:

For a lot of devices, the resolution specified by the manufacturer often doesn’t refer to PPI (pixels per inch) which is a better way to think about resolution. You can see this by looking at iPhone screen sizes for the past few years. The physical dimensions of the screen have hardly changed (see the CSS widths of iPhone 6 compared to iPhone X), but the resolution has increased almost 60%. So what you’re getting is a new device with the same physical size of an older, lower resolution device, but they have jammed much more PPI in to the screen. Following?

Faq Iphone 6 Resolution

Now you’ve read a little more about screen resolutions and device viewports and hopefully I have answered your what is my screensize question? There’s some more good info if you’d like to keep reading on these topics over at the Android website.

If you’d like a detailed list of different devices’ viewport sizes, pixel dimensiosn and CSS widths I’ve compiled all the info I can on this viewports list.

Phone Screen Dimensions

In today’s world, there are many devices for people to choose from, and it can be daunting if you try to place and build for the best experience on all devices. However, when designing websites and mobile devices, it’s important to be aware of the most popular phone screen sizes and resolutions so you can match your design to your screen viewers. An optimized and responsive website makes the user experience easier and ultimately more enjoyable for your audience.

Phone screen size vs. viewing area
When buying a device, both the screen size and resolution listed in the specifications are often shown. Screen sensitivity is the measurement of the screen diagonally, in inches. It should not be confused with resolution, which is the number of pixels on the screen, often shown in width by height (i.e. 1024×768). Because devices with the same screen size can have very different resolutions, developers use viewports when creating mobile-friendly pages. Viewports have smaller versions of the resolution, allowing websites to be viewed more consistently on different devices. Viewports are often more standardized and have lower resolution versions than resolutions.

While desktop and laptop monitors are horizontal resolution (higher), many mobile devices can be rotated to display websites in both horizontal and vertical (over the width) orientation. This means that designers and developers must design with these differences in mind. While desktop and laptop monitors are horizontal (over the width), many mobile devices can be rotated to display sites in both horizontal and vertical (over the width) orientation. This means that designers and developers must design with these differences in mind.

Coding for different phone screen dimensions

It would be nearly impossible for companies to design each device individually. Instead, developers often group responsive designs together:

Grouping styles into the most common sizes for phones, tablets, and desktop computers. In this case, anything larger than 7 inches is usually displayed at desktop resolution or… Use breakpoints (defined by the pixel width that the screen will adjust to fit the screen size) depending on the design and location. Sometimes a developer can combine both methods if they deem it necessary. It is recommended that you start by grouping typical device sizes together.

If you are a developer and want to create the styles needed to work with mobile or responsive styles, we have included a CSS snippet 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 you started.

Phone Screen Dimensions Table

What are the phone screen dimensions of popular phone and mobile devices? We’ve put together a very comprehensive list of phone screen dimensions which can help you with designing webpages for the various devices. Below is a condensed version of the list, but we provide pixel density, physical CSS and PPI (pixels per square inch).

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

Leave a Reply