+ 4

How we actually measure the screen resolution in pixels for different screens.

The main reason am working on website which is responsive but I want to know how we measure the screen max-width in pixels for different screens. e.g iPhone 6 has screen resolution 750×1334 It means iPhone 6 has max-width in pixels is 750.am right.

html css javascript screen web development pixels

7th Dec 2019, 4:38 PM

Maninder $ingh

4 Answers

+ 3

<!DOCTYPE html> <html> <body> </body> <script> document.body.innerHTML= "Height :"+window.innerHeight+" <br />"+"Width :"+window.innerWidth; </script> </html>

7th Dec 2019, 5:55 PM

🇮🇳Omkar🕉

+ 2

It depends on the context. The pixel pitch or pixel density (pixels per cm (ppcm)) of a display might not be relevant to how the device actually displays the website by default. For example, many phones actually use a much lower effective resolution when viewing mobile websites than their actual resolution. That's why many phones display as 360x640. This Wikipedia page should help increase your understanding of pixel density concepts: https://en.m.wikipedia.org/wiki/Pixel_density?wprov=sfla1 I would also look into designing for different aspect ratios. For example, when someone changes the orientation of their phone from portrait to landscape. Take a look at the most common screen sizes too. https://gs.statcounter.com/screen-resolution-stats

4th Feb 2020, 11:20 AM

Michael Doyle

use viewport unit. for max width is 100vw

7th Dec 2019, 4:51 PM

Taste

On your website, if you double click , or right click (on mouse), You’ll see the inspect element. Click inspect > it takes you to the Developer tools. There at the top left you’ll see pixels, and even devices. Choose one to see what your website looks like on that device. —

7th Dec 2019, 5:07 PM

Ginfio