Easiest way to build Apps for multiple screens?

[DevBoyLars]

Hello,
what is the easiest and best way to build Apps for multiple platforms without any borders or deformations?

[Mikey]

My two things:
1) tmControls 2 from Scott Rossi lets you build "profiles" for each layout/form factor. So, you can build portrait and landscape layouts quickly, and work on different scaling factors to get things just so. I also like the way his controls are far easier to customize (and have more properties to tweak) than the native widgets in lc8, and can take more icon fonts for icons. I keep trying to move to native widgets, but they aren't ready for me, yet. All the source is also just sitting there for you to work on, if you like.
2) Try messing with the fullscreenmode. I think the one you might be looking for is "exactfit", but it won't help you very much if you want your users to go from portrait to landscape, for instance.

[FourthWorld]

Hello,
what is the easiest and best way to build Apps for multiple platforms without any borders or deformations?

I took the liberty of emphasizing that last clause because I feel it's particularly important.

Today's mobile users can choose from a wide range of screen sizes and aspect ratios. Tablets often have screen sizes smaller than even those of modest laptops, and phones are far more popular and have much smaller screens. Sizes can range from 4" to 12", with apsect ratios varying among 3x4, 9x16, 10x16, and others. We want to respect the user's device choice, and make optimal use of every precious pixel available.

FullScreenMode can be an ideal solution for certain types of games or multimedia presentation, where maintaining the aspect ratio of the content is more important than making full use of the small screen.

But given the many different aspect ratios in common use, using fullScreenMode will mean that some devices will inevitably have unused space at the top and bottom or the sides of the screen.

Fortunately we're not alone. This is the same challenge every web developer faces, and the solution we can use is similar: responsive design, one layout that adjusts itself according to the metrics of the current screen.

In web development this is done mostly through CSS, sometimes augmented with JavaScript. In LiveCode this is done with scripting.

And as with so many things in software development, what we need to do for this mobile challenge is not much different we've been doing on the desktop for years: handle the resizeStack message to adjust your controls as needed to make optimal use of the screen real estate.

On mobile devices the resizeStack message is sent when a stack opens, and when orientation is changed - pretty much any time the screen dimensions change, since on mobile stacks are resized to fill the screen automatically.

On the web, it's common to use at least two and sometimes three different sets of CSS definitions for different categories of screen size: full size for laptops and large tablets, a more compact layout for phones, and sometimes a third where it can be useful to take advantage of the in-between sizes of small tablets and phablets.

In LiveCode, it's often easier to use different cards for those categories. You could script all that if you like, but having a card for phone and another for tablet can sometimes be easier to manage. As with CSS in web development, we can differentiate by screen width reliably enough, since like web browsers LiveCode uses logical rather than physical pixels.

With this approach you can layout two (or if you want to provide special support for phablets, three) cards, and with a resizeStack handler fine-tuning layout in each you can accommodate nearly every device you'll encounter in the wild.

Depending on the complexity of the layout, it can sometimes be convenient to have a different card for each orientation within each device category as well. But whether it's simpler to use a different card or just adjust the controls on one card will depend on the specifics of the layout.