Mobile app - funky screen when go portrait to landscspe and then back to portrait.

[drgarytraub]

I now this has been discussed before, as far back as 2012, but I could not find a resolution to this issue in my search of the forum posts. The issue is that in my mobile app, when user starts in portrait view, all looks great. Then when turns to landscape view, looks great too. But when they then go back to portrait view, the font becomes tiny and the screen is on the top half of the screen. Then if go back to landscape, looks good. Back to portrait, and funky screen again.

Is there a solution to this issue?

[peteconway]

How old is the device and is it Safari.?

[drgarytraub]

Hi Pete,

My device is a Samsung s9+ Android. Your question got me thinking - is the behavior device specific? browser specific?

I do not have an iphone, but do have an ipad - works correctly on the ipad!

Also tested several browsers on my S9+ works fine on Firefox and Dolphin browser, but not on chrome, samsung internet, edge, or opera

I do not think Safari is available on Android - at least I could not find it in the Google play store - so I cannot test Safari on the S9+

This is some progress.

Thanks so much for responding!

Why would different browsers behave so differently?

[peteconway]

Well from what I have learned they are not only device friven the a type and model driven.Safari it a wild beast, anything could happen especially from around iPad2 and iPhone6., the smaller the device the more problematic things become.

put his code in your onRenderComplete and onOrientationChange, also ass an object to your component called 'orientation' it will let you know just how your device thinks it's displaying, all it does is confirm what you think, but it does start you understanding what's going on, give yourself a chance by setting things left alignment and move forward from there, avoid centering..

var o = {dialog.object}.getOrientation() ;

{dialog.Object}.setValue('orientation',o);

[gregincolumbus]

I am FAR from an expert but this code solves the problem for me using Samsung s8+:

Place this in the onOrientationChange client side event for the UX and see if it solves it:

setTimeout(function(){
window.scrollTo(0, 1);
setTimeout(function(){
var obj = {dialog.object}.getPanelObject();
obj.resize();
},100);
},100);

So far it has worked for me on iOS and Android....but I am sure others on here have much more elegant solutions.

[drgarytraub]

Peter and Greg, I really appreciate the help.

Greg, I tried what you wrote, and unfortunately it did not work - I put an alert statement at end so I could be sure the code was firing each time I changed the orientation of the device, and that there was no error in the code. Indeed the alert displayed with each orientation change, so the code did fire, but it did not fix the problem:

setTimeout(function(){
window.scrollTo(0, 1);
setTimeout(function(){
var obj = {dialog.object}.getPanelObject();
obj.resize();
},100);
},100);
alert('hello');

Peter,

I will try that approach - to get a handle on what is going on - but I think in the above, I already confirmed, in a way, that the orientation changes are indeed being detected - is there something more I would gain by this? I guess I don't really understand. Because what I think I really need is code that will preserve the size of text from the portrait and be able to redraw with that size when orientation returns to portrait. Thoughts?

[gregincolumbus]

Gary..sorry my suggestion didn't help. I guess I misunderstood the display issue you are experiencing. Are you saying the text size changes on orientation change? Are you using em font sizes compared to px sizes?

[drgarytraub]

Hi Greg,

Yes the entire contents occupies approx the top one third of the screen and the text is tiny. But this behavior does not occur on the Dolphin browser, so unless there is a better solution, I will recommend that users use that browser for now. What device and browser do you use?

Thanks for following up!

[gregincolumbus]

Gary...is this happening on a list control? What theme are you using? Here is a video of my site running on Android (Galaxy s8+) using Chrome. It is using the Alpha theme. I rotate the phone several times but the font size remains constant....although the usability in landscape mode on a phone is very limited due to the control bars. This behavior is consistent on iOS devices and Android tablets running on pretty much any browser.

https://omeademovideos.s3.us-east-2....s.com/demo.mp4

[drgarytraub]

Hi Greg,

It's not just the list control; it happens to all controls, including buttons, input fields, everything. Regarding theme, I let the user choose, but generally start with MobBlue. I will try Alpha to see if the issue is resolved with that. But if that is the case, I would still recommend that users use the Dolphin Browser on Android since this behavior does not occur with that browser, regardless of theme ( at least so far for the ones I have tried). Thanks again for the input!

[gregincolumbus]

Gary...thanks for the suggestion on using the Dolphin browser....I will give it a try. Sorry I couldn't be of more help on solving the problem. Maybe others will be able to help you more. Best of luck in reaching a solution!

[drgarytraub]

Hi Greg,

Sorry for the late response. You were helpful and I appreciate it!

[drgarytraub]

Well, the answer to this problem was as simple as the meta tags on the a5w page. The following needs to go at the top of the a5w page, right after <html> tag, and right before <head> tag:

<meta name="generator" content="Alpha Anywhere HTML Editor Version 12 Build 6488-5436">
<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

Doing this, resolved my issues with tiny text on my login screen, and tiny text when changing from portrait to landscape and back to portrait.

Thanks to Selwyn!

[peteconway]

Thanks for following up.
Pete