Monday, 30 September 2013

Wrong scaling on phone - Site with half width/height = full screen

Wrong scaling on phone - Site with half width/height = full screen

So a little followup on my previous thread, but with quite new content..
And changes of the situation.
So i'm creating an Android app, writing in Adobe Muse normally by notepad,
but find Muse this time more easy and configured all files as a Phone,
with a resolution of 1280x720. And my test device is a HTC one X, with a
screen resolution of 1280x720. Once all code is done, I compile it at
Adobe Phonegap into an APK and install that one on my phone.
So in fact, what I write in muse (site @ 1280x720) should be 1:1 on my
phones screen. However, that's not the case. In fact, it shows everything
at 2times the size. I can scroll on my screen..
In fact, I've created a second version *with just an homepage and one
image on it, using whole the canvas, but I've made this one exactly half
the size of the original; thus a canvas of 360x760. Compiled and installed
again, and indeed, guess what: No scrolling and the image takes up the
full screen.
By other meanings: Somewhere on the road, my phone thinks it has a screen
size of half (360x640) the dimensions it actually is (1280x720).
I did a quick test with
<meta name="viewport" content="user-scalable=no, width=device-width,
initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
Hoping that it would somehow fit "half" to whole my screen, But without luck.
So guys: Here I am, all lost and got no clue anymore. Who can help me with
a working HTML/CSS/JS configuration, or if the problem lies at the phone
gap configuration, help me over there?
Click here to download the site files and the compiled APK to test for
yourself. Note: If you install the APK on your phone (instead of an
emulator) and you got a different screen size than 1280x720, of course
scrolling occurs.
I would be so grateful for the solution! Thanks!
p.s. I've made a second test version, with just an home page at a
resolution of 480x800 and with only an image on it, and tested it on the
Samsung S3 mini too (with a screen res. of 480x800), and also the whole
thing seems at 2x scaled.. I'm really lost.
p.p.s. Someone else said "Remember, you still got the statusbar". For
those of you thinking the same: I've set it to full screen, hiding the
statusbar and using the full screen.

No comments:

Post a Comment