- This topic has 2 replies, 2 voices, and was last updated 11 years, 7 months ago by
.
-
Posts
-
Hi,
Just finished searching and reading all the previous posts on device screen sizes. I also read and understand the design suggestions for the various screen sizes.
Still have a question on why the 6 listed devices in the menu have different screen dimensions in the editor as opposed to the actual technical specs published? While some of the design suggestions provide a work-around the screen size issues in general, having correctly sized work areas cannot be beat for proper layouts. It is understandable that the myriad of screen sizes are hard to accommodate, but since the 3 Androids are specifically listed, why not provide the correct editing windows for them ?
I can see that the 3 Apple devices accommodate the 20pix top system status line, so they are probably OK. However, the iPad seems to refer to an iPad-mini (1024×768).
But the Android ones are way off:
Nexus-S is spec’ed at 480×800 but shows 360×561 ?Assuming the two tablets below are Nexus tablets:
Tablet-7 is spec’ed at 1280×800 but shows 450×740 and the menu says 600×1080 ?
Tablet-10 is spec’ed at 2560×1600 but shows 800×1226 and the menu says 800×1280 ?I am just trying to make sense of the GUI by exploring it as much as possible within the trial window.
Thanks, TG
Hi tguneysu,
Mobione generates HTML/CSS/JS code that is supposed to be processed by Web Browser component on the target platform (Android or iOS). And for either of platforms “browser” pixel can be not equal to “screen” pixel.
For iOS platform things more or less simple: for all devices with Retina screen quadrangle of 2×2 pixels is treated as 1 browser pixel. Apple engineers made this decision to avoid requirement to re-layout all web pages created for non-retina iOS devices. This works in transparent way for HTML, CSS and JS, so, f.e. if you run screen.availableWidth on iPhone5 you’ll get 320 (while real screen resolution is 640). The same works for iPad – iPad3 and iPad4 have 2x resolution (2048×1536) but for HTML/CSS/JS it looks like 1024×768.
For Android things a bit harder. There are a lot of different Android devices with different screen resolutions and different pixel density (while, as you can see, for iOS pixel density could be only 1x or 2x). But – each Android browser has pre-set default zoom value (which depends from screen density and resolution) – this could be 200 percents for big high-resolution screens, 150 percents for common smartphone screen or 100 percents for low-resolution tablets, etc. Again, this setting is transparent for HTML/CSS/JS – so, Mobione tries to provide you this point of view. That’s why values you see for device screen sizes are often different from these device’s real screen resolutions. But, for Android you can make your designs pixel-to-pixel accurate. For this, select design and in it’s properties set “Startup screen” and then set “Android UI layout strategy” to “No UI Scale”. This makes “browser” and “screen” pixels equal, but we don’t recommend this mode (except the case you’re designing your app for single well-known device type – f.e. for NexusS only) – because in such case your UI elements will be too big for low-res screens and too small for high-res ones.
Hope, this makes things a bit cleaner.
Best regards
