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.
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.
got a solution to (y)our problem:
// Viewport Settings WebSettings settings = appView.getSettings(); settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
<meta name="viewport" content="target-densitydpi=medium-dpi, user-scalable=no, initial-scale=0.5, minimum-scale=0.5, width=device-width" />