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!

The PHYSICAL width & height of your device is of course fixed. The PHYSICAL DPI of your device is of course fixed. A viewport will scale the physical with the virtual. If you want to make them the same, make them the same ! — Jon Goodwin, Sep 24 '16 at 16:49
I understand that, but what I don't understand is that why is the physical width/height returning 640:360, yet canvas can behave in HQ 2560:1440? And how do I make them the same? :O — tery.blargh, Sep 24 '16 at 17:50
see my answer(s) [ more than one] to this: http://stackoverflow.com/questions/26828329/android-drawing-to-a-pdf-canvas-from-webview/38555548#38555548 it will probably anwser most of your questions — Jon Goodwin, Sep 24 '16 at 17:56
On an unrelated note, if someone could explain why I got a down vote I would appreciate it — tery.blargh, Sep 25 '16 at 09:46
Downvotes are like the witches. Nobody see them, but exists.... LOL — Marcos Pérez Gude, Sep 29 '16 at 11:11
Maybe you can solve setting the width and the height on viewport meta tag: `` — Marcos Pérez Gude, Sep 29 '16 at 11:12
@MarcosPérezGude Lol I tried adding your suggestion, no difference — tery.blargh, Sep 29 '16 at 22:41
@tery.blargh I upvoted Marcos' response, it *should* work. If not, there are hacks. Gave you one as an answer. — TylerY86, Sep 30 '16 at 01:42
@TylerY86 I don't know, but maybe there are conflicts through viewport vs CSS. Can you share with us a working example? — Marcos Pérez Gude, Sep 30 '16 at 08:26

TylerY86 · Answer 1 · 2016-09-30T01:53:15.657

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.

Just remembered, some devices *intentionally* report incorrect viewport sizes to keep text scaling consistent with the user interface, and *other shenanigans*... — TylerY86, Sep 30 '16 at 01:55

Developer · Answer 2 · 2016-09-30T01:57:44.587

1

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.

edited Sep 30 '16 at 01:57

answered Sep 30 '16 at 01:49

Developer

324
3
13

You might want to give some credit to MarcosPérezGude in your answer. I wager you'll be hard pressed to actually make an example with this that people could see though. lol – TylerY86 Sep 30 '16 at 01:51

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

2 Answers2