Beware the difference between Mobile Screen Resolution & Browser Window Resolution

[pauland]

The problem is that many devices have very dense screen resolutions - this makes their text and graphics very crisp to the eye.

When Apple introduced the retina screen, they doubled the number of pixels on each axis, really offering quadruple resolution.

So, if a page was viewed filling a non-retina screen, then the same page viewed on a retina screen would only occupy one quarter of that screen if pure pixel measures were used. It would be tiny and hard to read.

So instead, the effective pixel measure for the web page remains the same between non-retina and retina models, however the browser is able to render text and graphics more cleanly because the device can faithfully render quarter pixels.

Typically graphics can be supplied in two resolutions to cope with the density of the display - normal size and @2x resolution, (you'll see Xara supports this).

So what's happening is that Xara is seeing the reported resolution of the device "CSS pixels"but the physical resolution is much higher and is used to give text ,graphics and bitmaps much more clarity.

Does that make any sense? I've mentioned Apple, but the principle is the same for all mobile devices.

Mobile devices are small, generally so having a greater pixel density ( more pixels ) doesn't automatically mean you get to display larger web pages in the same space - after all your eyes don't get better at recognising fine detail and people don't want to look at pages as though they're twice as far away.

I do a lot of development on iPad and iPhone apps. When I place a image at (100,100) it will really be at hardware (100,100) for a non-retina iPad, but at hardware (200,200) on a retina screen. If I want a bitmap to be 200x200, on a non-retina screen it will occupy an area of 200x200 hardware pixels. On a retina screen it will occupy an area of 400x400 hardware pixels. If I provide only a 200x200 pixel image it will be scaled up on the retina device. Typically I can supply a higher resolution image for the retina screen with a @2x suffix (and a resolution of 400x400). So my inteded design is the same on either machin - physically the same size.

Apple refers to it's screen units as points not pixels, so the screen drawing area is independent of the pixel density of the display.

As I said, the same principle follows for other manufacturers as regards hardware resolution not matching the web page resolution. I deliberately didn't mention the iphone 6.

If you think all this is odd, exactly the same thing happens with your HD TV. Standard definition video would be a little box on the screen, so the image is upscaled to fill the available area. Your mobile does the same.

[blueznl]

Yep. I struggled with this as well. Two things to keep in mind:

1. The browser reported px has nothing to do with the real resolution of the device.
2. The variant displayed is the one nearest to the browser px

As far as I could figure out, the browser uses the variant CLOSEST to the browser's reported resolution. Most mobile browsers auto scale down a little after loading a full page, so they all handles 480 px variants on a 360 px browser without problems (after an automatic reload, alas).

Tablets were a little troublesome. In the end I chose to create my mobile page at 480px, and my regular page at 1200px, as I did not want to create more than two variants, and I wanted the site (on a rotated iPad) to switch between mobile and regular version.

For more control you need to add more variants...

[jamesd]

Your phone uses its full resolution for things like playing media etc. If you want to see what resolution your phone uses while browsing the internet check here http://www.whatismyscreenresolution.com

[sam579]

Thanks, I have had the same issue.

[mattwatt]

It's not just about resolution, you need to know your device pixel ratio too.
DPR is basically a number that tells you how many physical pixels are used by device to form one CSS pixel. the larger the DPR the sharper the display.

[Acorn]

It's not just about resolution, you need to know your device pixel ratio too.
DPR is basically a number that tells you how many physical pixels are used by device to form one CSS pixel. the larger the DPR the sharper the display.

matt, welcome to TalkGraphics.

Your input is appreciated.
The flags w look for are adding to stale Threads and linking out to external websites, especially on first posting.

As far as I can determine your linked site is benign.

Here is a Xara code design that does not rely on using any external site: JS - Screen Resolution Utility.xar
It does not track your accesses unlike most sites today.
It also has a little more information, returning all of your viewing Screen Object Properties.

https://caniuse.com/devicepixelratio is by far more informative.
window.devicePixelRatio can be used to show the current Browser Zoom value; if you change that just refresh the browser.

Acorn