Scaling on Mobile

[bamakojeff]

I designed my app for phone size screens. The problem is that when you run the app on a 13" tablet with high resolution the interface seems really small.

So I thought that an easy fix would be to allow the user to scale up the interface if they so desired. So imagine that I want to make the screen 25% bigger. In that case I do all my calculations for altering the geometry using only 80% of the screen. So if the dimensions of the tablet screen are 1200x1600, then I do all my calculations as if the screen were 960 x 1280. I configure all the controls on the card and position everything as if the screen were 960 x 1280. Then I set the stack width and height to these values and set

Code: Select all

fullscreenmode="showAll"

(or "exactFit" or whatever). But nothing changes. My interface sits in the upper-left corner taking up 80% of the horizontal and vertical space.

The problem is that the stack size has not changed, hence it doesn't scale up - it's already at the sceen size. If I query the stack dimensions immediately after changing them, the stack retains the dimensions of the actual screen, not the dimensions I just assigned it.

Here's the code I am running followed by the log output

Code: Select all

local tWidth = 960 
local tHeight = 1280
log "setting stack dimensions to" && tWidth & comma & tHeight
set the width of this stack to tWidth
set the height of this stack to tHeight
log "reading stack dimensions at" && the width of this stack & comma & the height of this stack

05-07 13:25:46.265 11173 11194 I LiveCode: setting stack dimensions to 960,1280
05-07 13:25:46.266 11173 11194 I LiveCode: reading stack dimensions at 1200,1600

I've tried setting fullscreenmode to empty or "noScale" before I set the stack dimensions, but that doesn't change anything. I've tried
setting the "fullscreen" property of the stack to false before I set the dimensions (although the docs say that only works on desktops), but that doesn't change anything either.

Can you not change the stack size once it's running? Or am I completely misunderstanding how scaling works on mobile? I thought I was being so clever!

[bwmilby]

Take a look at my project here:
https://github.com/bwmilby/mobileDemo

You may just need to try setting the rect of the stack and not the height/width. That is how I changed stack size in the above project.

[stam]

Thanks for the share Brian!

On an unrelated note, I see GitHub views your code as 100% HTML, which is mildly aggravating...
When will LC push for their language to be recognised as such on GitHub?!?!?!

[bamakojeff]

Thank you Brian! Your mobileDemo is incredibly helpful. I'd never even heard of "mobileSetFullScreenRectForOrientations" before.

Unfortunately my stack does not love me because setting the rect of the stack doesn't "stick" either.

Code: Select all

log "rect =" && the rect of this stack
set the rect of this stack to "0,0,330,547"
log "rect =" && the rect of this stack

05-08 14:08:18.812 16121 16148 I LiveCode: rect = 0,24,412,708
05-08 14:08:18.813 16121 16148 I LiveCode: rect = 0,24,412,708

I've checked that the stack is "resizable". I tried adding mobileSetFullScreenRectForOrientations with the same dimension (which your code seems to do, although I've not looked deeply into it yet). I have no idea why it won't resize. I know it works because I watch it work on your demo!

I'm going to make a new stack and start over and see what happens. Maybe I can figure out what I've got set on this one that it refuses to resize. You clearly know a ton more about this than I do, so if you have ideas what's going on, please let me know.

Jeff

[bamakojeff]

Just for the record, I created a new stack, followed the mobileDemo code, and scaling worked perfectly. So there's something in my earlier stack that is causing the problem. I'm retiring my old "display testing "stack and starting afresh with a new "display testing" stack.

Thanks for your help!

Jeff