Beware the difference between Mobile Screen Resolution & Browser Window Resolution

**Egg Bramhill** · 24 October 2014, 03:42 PM

Can others confirm this?

I have an HTC Desire 310 which has a screen resolution of 480 x 854 pixels. I created a test site with the following variants

Main 960 px
v1 720 px
v2 480 px
v3 240 px

When viewed on my desktop the break points 360, 600 & 840 worked as expected as I reduced the browser window width.

However on my HTC, in portrait, instead of viewing the 480 variant it servered up the 240 variant.
When I rotate to landscape I get the 480 variant, not the 720 variant.

On non desktops and laptops, there is a large difference between the browser window size and the stated screen resolution.

This holds equally true on my iPad4.

I'll attach my test xar file and you can test it on your other devise live here.

Just watch the Variant Size Header.

There is a small Javascript in the <head> that displays the browser window resolution in an alert. You need to hit Refresh as you test the portrait/landscape modes.

Link to live example

**dutchim** · 24 October 2014, 04:35 PM

480 vertical and 720 horizontal on the Galaxy Note 3.

**mwenz** · 24 October 2014, 05:09 PM

Same sizes here as dutchim on my Android phone...and the variants switch with no refresh using Opera as the browser.

**Egg Bramhill** · 24 October 2014, 07:13 PM

Hi Dutchim,

That's my point. Looking at the Galaxy note 3 on Google it gives: Resolution = 1080 x 1920 pixels, but it's only displaying at 480x720. What variant is it serving up in Landscape & Portrait?

**Egg Bramhill** · 24 October 2014, 07:18 PM

Same sizes here as dutchim on my Android phone...and the variants switch with no refresh using Opera as the browser.

Mike,

What phone are you using & what screen resolution does it have? What variant is being servered up in Portrait & Landscape?

The only need to refresh is to have the javascript show the browser window size in 1st portrait, then once rotated, refresh and it alerts to the landscape browser size.

**Egg Bramhill** · 24 October 2014, 07:24 PM

I've now tried it on a iPhone 5S which has a screen resolution of 1136 x 640 px.

In Landscape it serves up the 480 variant @ 568 x 212 px browser window resolution.

In Portrait it serves up the 240 variant @ 320 x 480 px browser window resolution.

**Egg Bramhill** · 24 October 2014, 07:41 PM

One my iPad 4 retina which has a screen resolution of 2048x1536.

In Landscape it serves up the 960 variant @ 1024 x 672 px browser window resolution.

In Portrait it serves up the 720 variant @ 768 x 928 px browser window resolution.

**mwenz** · 24 October 2014, 09:23 PM

Motorola Droid 4. Looking online, the display is suppose to be 960 x 480.

Going to your test site with the phone in landscape orientation, the site displays the 720 variant. Rotating the phone to portrait, it switches to the 480 variant.

If I change the system to not shrink to fit the display, the 720 variant always displays.

**haakoo** · 24 October 2014, 10:07 PM

http://www.dimensionstoolkit.com
Here is a chrome extension/plugin which uses most common breakpoints
Online version for testing nonlocal sites
Paid extension for local files available

Hans

**Oh make sure to put in the http:// with your url as it will not work without it**

**Egg Bramhill** · 24 October 2014, 10:30 PM

Cheers Hans,

But I can't see how this helps. Your link leads to a responsive website testing tool. Xara doesn't create responsive website, just variants of the Main (Desktop/Laptop) website.

My point is that creating a 480 px variant in Xara doesn't display a 480 px on a mobile device.

Thread: Beware the difference between Mobile Screen Resolution & Browser Window Resolution

Thread Tools

Display

Beware the difference between Mobile Screen Resolution & Browser Window Resolution

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions