2 Attachment(s)
Beware the difference between Mobile Screen Resolution & Browser Window Resolution
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
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
480 vertical and 720 horizontal on the Galaxy Note 3.
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
Same sizes here as dutchim on my Android phone...and the variants switch with no refresh using Opera as the browser.
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
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?
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
Quote:
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.
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
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.
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
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.
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
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.
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
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**
Re: Beware the difference between Mobile Screen Resolution & Browser Window Resolutio
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.