window.innerWidth and window.outerWidth Issues

[ya6655]

Hello,

I'm testing my Phonegap app on a Samsung Galaxy S4, which has a screen resolution of 1920x1080 (Amazing screen BTW :) ).

My app uses a HTML5's Canvas, putting this canvas in full screen, so all you see is this canvas.

I set:
canvasMain.width = window.innerWidth;

And the resolution of the canvas is very low compared to the 1920 it is supposed to be.

than I set
canvasMain.width = window.outerWidth;

Now I think the canvas does get to be 1920, but the screen only shows small part of the canvas.


I think (Not sure) that in both cases the resolution of the screen is the same, but the canvas size is different.


How can I make my Phonegap app use the maximum resolution possible of a device ?


Thanks.

[WENTING ZHANG]

Ok, I found this post 

Samsung Galaxy S4 resolution:
Real resolution: 1080X1920
CSS resolution: 360X640

https://coderwall.com/p/ygcyha

did you get 640 instead by using window.innerWidth ? I suppose so, because nowadays, the smartphone has amazing resolutions for display but not exactly pixel to pixel for web viewport resolution. As you can imagine, if the ordinary webpage was displayed in 1920 on a phone, it would too small to see. For ipad retina, the real pixel is 2048, but render every thing as 1024, PICTURES, TEXT will be more sharp, but you should treat them as 1024 when you develop.

So You should stick to the innerwidth you get, because that is the CSS resolution, the only resolution you should care about as developer.

On Saturday, September 21, 2013 9:12:59 PM UTC-4, ya6655 wrote:

Anyone ? :(

[ya6655]

Thanks for your post.

I'm developing an app which uses a HTML5 canvas in full screen, and I want to use every pixel possible to display HD pictures.

Is there a way to modify the CSS resolution to the device's maximum ?

Thanks.

[ya6655]

By the way WENTING ZHANG,

When I use Chrome to browse the web normally using the Galaxy S4, the screen is 1080X1920.

It's only in Phonegap where it is 360X640.

[Appsotutely]

Hi ya6655,

You seem to be hung up on not actually addressing pixel-by-pixel in your code.  Depending on what you're doing, it may not make any difference.  Are you intending to draw pixel-by-pixel or are trying to make sure that a 1080x1920 photo/graphic is displayed at 1080x1920?  If it's a photo/graphic, it should come through just fine.  To see for yourself, take a 1080x1920 graphic and resize it in a drawing/paint program to 360x640, then put both graphics into your program and have your code stretch it to the CSS limit and view each of them on your S4.  Do they look identical or does your 1080x1920 original still look 3x sharper and more detailed?  I believe you should see a clear difference between the two images despite the fact that you'll be displaying each in the CSS virtual space of only 360x640.

Perry

[ya6655]

Hey,


Basically I want both.
First to display images at the highest possible resolution (I'm thinking about the future too, when better resolution appear, and I want to solve the problem now).

Second I allow a painter in the app, so let's say the user draws a line from (0,0) to (100,100).
If the app uses 360x640 than 'pixels' are visible, you see small squares 1 by 1, and it doesn't look so great. but with 1080x1920, it's almost the 'border' that above it the human eye can't notice those 'squares' (pixels), and I want to reach that point.

So I want to reach a level where the whole app is 1080x1920 (or the maximum of any current or future device).


Thanks.

[Sam Thompson]

Check out the source of this, it might help or point you in the right direction:

http://www.tricedesigns.com/2012/06/18/lil-doodle-source-code-now-available/

[ya6655]

Hey Sam,

Still no luck.

I've added:
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

from the project you posted, hasn't change anything :\

Thanks.

[ya6655]

Does anyone have a solution for this problem ?

[ya6655]

Any solution for this problem ? :)

[Aleksandar Smith]

While working on my realruler app I ran into similar problems with both innerWidth and outerWidth. 

In the end I think you should stick to innerWidth and experiment with it until you get it work, because outerWidth returns 0 when window is not visible or does not have focus. You can test that when you open link with your site in a new tab, wait until page loads and than switch to it. Canvas will probably be empty. By the way, to get full resolution of screen, you should stick to innerWidth and than multiple that value with window.devicePixelRatio which in case of my Samsung s4 is 3. you can freely check how I did it in my ruler app here http://www.realruler.com

maybe someone find this useful

regards