Phonegap Cordova - Changing resolution of overall device (not the canvas)

Question

I'm trying to change the overall dimensions of my app. It reads 360x640. My canvas is 4x larger in DPI thus giving me 1440x2560 using window.screen.width.

There is a method to use window.screen.width to define a canvas, but I'm trying to change the value of window.innerWidth & window.innderHeight.

Main problem I'm facing is when I drag an element, it moves 1pixel per 4pixel of my touchmove because the app's width itself is 360, and the canvas is 1440, thus moving 1px on the device, per 4px of my touchmove. Even though I achieve a 60fps drag, if you look closely, it gives the drag a kind of block moving effect, rather than being smooth.

I'm not sure but I think this was solved with defining viewport in html by target-densitydpi=device-dpi, but this has been deprecated.

I think what I need is a way to make the window.innerWidth be equal to window.screen.width, is this possible?

window.innerWidth   == 360px //Can I change these values?
window.innerHeight  == 640px //Can I change these values?
window.screen.width == 1440px
window.scree.height == 2560px

P.S If question unclear, don't hesitate to ask away!

Answer 1

Alright this is kind of a hack. Honestly the viewport thing Marcos Pérez Gude mentioned should work, you should try playing around with that more, but mobile devices can be so inconsistent... Edit: Some devices report incorrect sizes intentionally to enforce uniform scaling.

Use javascript to calculate the ratio of window.screen.width / window.innerWidth, do the same for heights...

Take the minimum (or maximum, your pick) of the two and apply a CSS style for the document element :root { transform-origin: 0 0 0; transform: scale(<value>); }. Maybe html instead of :root.

Here's what it'll look like.

:root { transform-origin: 0 0 0; transform: scale(0.5); }
#example { width: 400px; border: 1px solid black; }

Hello guys. I'm moving between the CSS pixels!
<div id="example"> I AM 400 PIXELS WIDE! ... or 200 pixels wide? </div>

As shown below, there's also just plain ole zoom. Should be the same effect.

:root { zoom: 0.5; }
#example { width: 400px; border: 1px solid black; }

Hello guys. I'm moving between the CSS pixels!
<div id="example"> I AM 400 PIXELS WIDE! ... or 200 pixels wide? </div>

Below is an example for comparison without zoom or scaling.

#example { width: 400px; border: 1px solid black; }

Hello guys. I'm moving between the CSS pixels!
<div id="example"> I AM 400 PIXELS WIDE! ... or 200 pixels wide? </div>

Now as for making the innerWidth the same as the the same as screen.width ... The properties are mutable, so immediately after calculating and scaling, you can do window.innerWidth = window.screen.width ... and the same for height. Maybe back up the originals, and on an orientation change event, make a correction.

Answer 2

Up vote for Marcos Pérez Gude.

Please post your CSS also.

When you add viewport tag in head

<meta name="viewport" content="width=device-width; height=device-width; initial-scale=1" /> 

It wil match your html body width & height to fit to screen if you have no fix height & width in CSS. Please remove height & width if you have set in CSS.

Viewport will definitely work.