Mobile Device Physical Size

[Richard Gaskin]

Thank you for bringing this to the list, Ralph:

 > On Richards talk yesterday I brought this up and I am moving it to the
 > list.
 >
 > Say you have 3 Android devices:
 > 1) Phone sized.
 > 2) Note sized.
 > 3) Tablet sized.
 > It is entirely possible that these 3 devices have the same(or close)
 > number x/y of pixels.
 > How can I determine the physical size of mobile devices? Web browsers
 > are able to determine the device size or at least a phone vs. tablet.
 > I would like to change the screen layout based on the physical size.
 >
 > I can determine a phone vs. tablet for Apple devices because of the
 > limited number of iOS devices.

But we don't know what Apple will come up with next, so ideally what we 
use can accommodate all devices on both iOS and Android, without having 
to hard-wire values for any specific brand or model.

Earlier versions of LC may have been different, but in recent versions 
it seems that LC's resolution-independence works very much like that of 
browsers (probably using the same OS APIs under the hood), using logical 
metrics rather than physical.  This allows devs to place objects 
reliably across devices where physical pixel density may vary.

I just ran a quick test to see how well that works:

Right now I have only two devices from my test pool charged, but they 
make for a good comparison because their pixel density difference: a 
mid-range phone (LG G Stylo) and a super-cheap tablet (Amazon Fire 7; 
lists for $49, can find on sale now and then for $39 - great for 
testing).  Given the price difference between the two, it's not 
surprising that this tablet has such low pixel density compared to the 
phone which is both higher res and physically smaller.

To quickly assess browser metrics I went to WhatIsMyScreenResolution.com 
in Firefox on each device.  For LC I added a "Screen Size" button to a 
test app to display the last two items from the screenRect function, 
along with the value returned from mobilePixelDensity().

Here are the results:

                   Diag  Physical    Web    LiveCode PxDensity
                   ----  --------  -------- -------- ---------
LG G Stylo Phone: 5.5"  720x1280  360x592  360x592   2
Amazon F7 Tablet: 7.0"  600x1024  600x976* 600x976   1

This is awesome.  It looks like the core team's work on resolution 
independence has paid off handsomely for us:  we can use the same 
general layout strategies web devs use with Responsive Design, with good 
placement using logical coordinates that automatically account for 
differences in density.

This is also good for our development workflow: leave your stack 
resizable, and once you have your resizeStack handler written you can 
test your object placement for any size by just grabbing the stack 
window's corner and moving it around.

I don't have my iOS devices with me at the moment, but it would be 
helpful to learn if any of you see any differences between the logical 
pixels reported by browsers and those in LC on iOS.


* Note: If you use Amazon's pre-installed Silk browser the vertical size 
of the Fire 7 is shown as 1024; apparently Silk reports the full screen 
while Firefox and LiveCode subtract the height of the button row at the 
bottom of the screen (48px) to reflect only usable space.

-- 
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  Ambassador at FourthWorld.com                http://www.FourthWorld.com