How do I resize a sprite for mobiles

Ok, I've been doing some testing on how to make a flexible app (not a game).

First, I set the project into crop mode. Then I created a sprite and position and resize it based on viewport and window sizes. From there, I can 'arrange' the objects on it and have everything automatically rearrange itself depending on whether the mobile device is rotated vertically or horizontally.

For example:

I use ViewportLeft(0)+20 and ViewportTop(0)+20 to set the x,y coordinates for the location of the sprite.

I then do WindowWidth-40 and WindowHeight-40 to set the height and width of the sprite. Then I position my controls on top of that sprite and position them based on it's size and position.

On a desktop, when I resize the browser (works on Chrome, Edge and IE) and reset the layout, it works perfectly. The sprite stays perfectly centered and perfectly sized.

However, when I test this on an Android Chrome or the stupid Samsung Browser, the x,y are correct but the sprite height and width are too large. I'm thinking this has to do with the fact that these browsers are reporting their full size and not the size of the actual browser window (i.e. they're adding in the URL bar to their height).

So here's my question. When I decide to deploy, go full screen and get rid of that URL bar, should this size properly?

I've been making adaptive app-layouts almost the same way..

The best way is to stay consistent..

instead of using windowwidth and windowheight, keep using the viewportleft, right, top and bottom..

Windowwidth - 40 would become: viewportright(0)-viewportleft(0)-40

windowheight - 40 : viewportbottom(0)-viewporttop(0) -40

the horizontal center of your layout : viewportleft(0)+0.5*(viewportright(0)-viewportleft(0))

Etcetera..

I put most of these values in variables and update them on any change in the windowsize, having different ways of showing things for landscape and portrait and depending on the amount of pixels availabe..

One thing that could be happening on mobile is the app is called fullscreen so when the "on start of layout" event is executed the windowsize is different than a few ticks later when the browser adress bar "re-appears" (This is just a guess/possibility, but can be easily caught by also using the browser-objects "on resized" event to call the set layout function)

AH HAH! Thank you! I may have read one of your posts earlier about using this technique. I was looking at what happened when I ADDED the bottom and top. I didn't even think about subtracting the top from the bottom to get the size. DUH!

Once I did that, to set the size, it properly resized everything in both the desktop and the mobile and it resized properly when I rotated the mobile.

Now, I can make an app that works both in landscape and portrait!

Dunno if you'll see this LittleStain but here's a tool I found invaluable for testing these values

quirktools.com/screenfly

Dunno if you'll see this LittleStain but here's a tool I found invaluable for testing these values

quirktools.com/screenfly

Thanks, I'll have a look..

When you put in front of the name, in my case LittleStain the user gets a notification..