Resolution of smartphone browsers

Question

I'm just curious how Android phones specifically calculate the resolution of responsive web pages. For example, I know that while an iPhone 5s has a native resolution of 640x1136, the resolution it uses for webpages is 320x568. (So I can measure the elements of my design accordingly when needed - I typically use percentages, but sometimes I need to measure elements in pixels)

So, when an Android phone visits a responsively designed website, and has a native resolution of 1920x1080, what are the elements on the web page being rendered as in terms of size? Is it also 1/2? Or is it different between devices?

The testing I've done isn't giving me a clear idea of what's happening.

Thanks!

Answer 1

In my experience, most of the time you can get the results you want if you structure everything correctly and just focus on device width.

Device width is a true measure of the pixels on the smartphone or tablet, figures for resolution are typically double for retina devices.

Structuring correctly means:

(1) In the head of your doc include your meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

optionally you could prevent zooming with

<meta name="viewport" content="width=device-width, user-scalable=no" />

(2) In your CSS use media queries like

@media (max-width: 480px) {
  ...
}

@media (max-width: 767px) {
  ....
}

@media (min-width: 768px) and (max-width: 979px) {
  ...
}

@media (min-width: 1200px) {
  ...
}  

The break points you choose aren't so important but rather the prinicple that you are manipulating the on-screen display based on pixel widths and not complicating your life with pixel ratios, resolution, orientation and other related details.

For sure you will encounter exceptions but if you start simple and it gets the results you want, then you avoid the slippery slope of trying to target devices, and it helps future-proof your design.

Good luck!