How do you handle different screen resolutions in mobile apps

[JJS]

Yes indeed Richard, your are totally right.

Reading your message, i thought  it while reading your sentences.

Just like making the browser window smaller you can see a website which 
uses bootstrap react on the size, so you can mimic a tablet or phone.

We can do indeed the same with our stack window like you say. And 
perhaps just a few most used sizes is enough and a lot of sold phones 
are around 5 inches these days.

Gonna have some more play with it.

Thanks.

Op 19-8-2019 om 22:12 schreef Richard Gaskin via use-livecode:
> Matthias Rebbe wrote:
>
> > Especially on Android, where so many devices with so many screen
> > resolutions are available, how do you handle all these resolutions in
> > your mobile apps?
>
>
> This is the central question all developers have, whether making 
> native or web apps, ever since mobile platforms were first popularized 
> nearly a decade ago.
>
> We're not alone.  Far from it.  EVERYONE has this question.
>
> So how do they handle it?
>
> Web designers generically refer to it as "responsive design", as in 
> responding to whatever screen dimensions or orientation the user may 
> have at the moment.
>
> In web development, the common method is to make at least two layouts 
> based on a maximum screen width, where one is for full-sized screens 
> and the other is for handheld devices: e.g., if less than 600px the 
> layout is slimmed down and elements placed differently to fit 
> comfortably on screen.  Depending on the layout and features, a web 
> developer may use other screen widths to determine layout specifics 
> for in-between devices like "phablets", or for different orientations 
> if the nature of the app requires doing something more than flowing 
> content downward.
>
>
> In web development, layout is governed by properties set via CSS, and 
> are triggered automatically with page rendering.
>
> In LC, layout is governed by setting properties via LiveCode Script, 
> and are triggered on a resizeStack handler.
>
>
> So the good news is: none of this is much different from what we've 
> been doing for decades with resizable windows.  If you're comfortable 
> moving and resizing controls for normal resizable windows on the 
> desktop, you have the background needed to do the same to accommodate 
> any window size, including the small single-window layouts of mobile.
>
>
> It gets even better: in the very early days of LiveCode for mobile, we 
> had to think about pixel density and work that into our scripts, 
> greatly complicating the arithmetic.  But many years ago the core team 
> did an excellent job of liberating us from the many different pixel 
> densities available on mobile platforms.  Now, LC's resolution 
> independence automatically accounts for the device's pixel density, 
> allowing us to write our control placement scripts once using logical 
> pixels, and LC does the work with the OS to translate that into 
> physical pixels automatically.
>
>
> So in short, look at your UI, determine which controls may need to be 
> resized or moved, and put that code into a resizeStack handler.
>
> And since resizeStack is among the messages available on the desktop 
> as well, you can test your layout code easily as you go, right in the 
> IDE.
>
>
> Moving and resizing controls is usually not the hard task for any LC 
> scripter familiar with LC basics.  The harder task can be deciding 
> which controls need adjusting, and how.
>
> For that, look at the apps on your phone.  Switch orientation, noting 
> which controls are resized, which are moved, etc.
>
> Then use the LC Script you already know to do that with your controls 
> in your app.
>
>
>
> Example
> -------
>
> Consider a very common UI we've all seen, a message form:
>
>   --------------------------------------------------------
>   |   -------------------------------------------------- |
>   |   | field "To"                                     | |
>   |   -------------------------------------------------- |
>   |   -------------------------------------------------- |
>   |   | field "Body"                                   | |
>   |   |                                                | |
>   |   |                                                | |
>   |   |                                                | |
>   |   |                                                | |
>   |   -------------------------------------------------- |
>   |                                         -----------  |
>   |                                         |   Send  |  |
>   |                                         -----------  |
>   --------------------------------------------------------
>
>
> To adjust those controls for all practical sizes snd orientations on 
> every desktop and mobile platform LC supports:
>
> on resizeStack x,y
>    set the rect of fld "To" to 20,10,x-20,40
>    set the rect of fld "Body" to 20, the bottom of fld "To", \
>        x-20, y- 50
>    set the bottomRight of btn "Send" to x-10,y-10
> end resizeStack
>
>
> -- 
>  Richard Gaskin
>  Fourth World Systems
>  Software Design and Development for the Desktop, Mobile, and the Web
>  ____________________________________________________________________
>  Ambassador at FourthWorld.com http://www.FourthWorld.com
>
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your 
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode