How to determine number of effective pixels a mobile phone's viewport has

Viewed 298

I need to test a website on a Huawei Mate 9. I don't have access to the device. The basic model has a 5.9-inch 1080 x 1920 pixels IPS display.

Does that mean that when you view a website on this device, its viewport width is 1080 pixels?

Or does pixel density come into it somehow, and the viewport width is less than 1080 pixels?

2 Answers

After the introduction of hi-resolution screens there was a problem. High resolution screens would render unreadable and small text when fonts had a pixel value. So often pixels are scaled on mobile devices; e.g. 1 css pixel contains 2 device pixels.

A more or less default approach to scale these pixels today is adding a viewport meta tag to your html document. Usually <meta type='viewport' content='width=device-width, initial-scale=1'>. This sets the viewport width to that of the device-width, which is measured in CSS pixels recommended by the device (not actual pixels). More about the viewport meta tag on MDN.

You would have to know the CSS Pixel ratio to calculate the width.

However you probably don't really have to know the specific pixel width of this device. You should not design your website specific to one device, but instead rely on this scaling and design your website to be useable on many devices using media queries.

PS: If you want to test on this specific device you could use a mobile device emulator service. These services allow you to test your website on a remote device of your choice.

The viewport width won't be 1080 pixels. Nowadays a CSS pixel does not equate to a hardware pixel. The device usually has a ratio that determines how many hardware pixels conform a CSS pixel and it's calculated like:

CSS Pixel = Device Pixels / Device Pixel Ratio

I don't know the DPR of the Huawei Mate 9, but for the Mate 10 it's 3.0. So if you set a div's with to 100px it will occupy 300 device "real" pixels. Assuming the same DPR, the Mate 9 would have a width of 360 CSS pixels.

One small thing though is that sometimes the formula doesn't work and the conversion to device pixels doesn't give you real device pixels. It's output will be "rendered pixels" and the device will apply a downsampling to map the actual hardware pixels of the screen.

Related