[support-michael]

HOW TO: Prevent Landscape Orientation

It is not currently possible to lock an iPhone mobile-web user interface into either portrait-only or landscape-only mode. Until that functionality is natively available the next best solution is to provide informational feedback to the user when the device is in an unsupported orientation.

The attached example illustrates how to accomplish this with a very small bit of javascript code. The example consists of 2 primary UI pages that the user can navigate back and forth between, i.e., main.mobi and page-2.mobi. For demonstration purposes let’s assume that landscape orientation is not support. So I have included a 3rd desing page, orient-fail.mobi. When the user rotates his iPhone to landscape orientation I want the orient-fail-mobi page to be displayed. Then when the user changes to portrait mode I want to go back to the previous valid page.
See attachment landscape-prevent.png

The main code additions are shown in here:
See attachment example-code-ss.png

Example code:
See attachment prevent-orientation-change.zip

Wayne
Genuitec Mobile Team

Attachments:

You must be logged in to view attached files.

[adamos]

Hi,

The disable lanscape orientation codes doesn’t work after i rename main.mobi to index.mobi. Works perfectly when I use main.mobi . Any help will be much appreciated. Thanks.

Regards,
Adam

[support-michael]

@adamos
Q1: Did you make any other changes to the example code attached to this thread?

Q2: Does your renamed index.html file launch in the Test Center?

Q3: Are you trying to upload your webapp using Send To My Phone feature?

I downloaded it, renamed main.html to index.html and then launched in the Test Center. The landscape detection works for me.

[adamos]

Hi Wayne,

Thanks for the reply. Managed to get it working.

Was wondering if you can help me on this. I’m trying to develop a mobile site using mobione and have the pages uploaded to Appmakr (http://www.appmakr.com). Appmakr is able to take in html files and wrap it into an iPhone app. Apparently there’s no feature in Appmakr that allows me to disable rotation. The page looks awful in landscape and I would like to use your codes to disable view when on landscape mode. Been trying to get it to work with appmakr but no luck.

Anyway, thanks for the reply.

Regards,
Adam

[support-michael]

@adamos
Interesting idea. I’m somewhat familiar with appmakr but have not tried to native-enable a mobione webapp. I’ll give it a try when I have some free time.

[adamos]

Hi Wayne,

So far the HTML pages designed in Mobione worked flawlessly in Appmakr. That includes the animation for the page transitions. The only downside now is the landscape orientation. I’m no good in programming but I think it has something to do with the codes in Mobione that detects the screen display size when in Appmakr landscape orientation. Thanks again for looking into this issue.

Regards,
Adam

[MikeNed]

Hi Wayne,

Is the their a way to fix a landscape view with code? Or is this not possible? When I have a row of items that i design in the portrait view, this does not reposition itself in the landscape view. Only the toolbar on button en the top resposition its self.

Thanks

Michael

[support-michael]

@MikeNed

MobiOne relies on the features of mobile safari browser which does not provide an api for locking the UI orientation. When we introduce native build service, orientation locking will become possible. In the meantime you have 2 options:

1) design UI to work well in both portrait and landscape orientations
– I’m curious, are the auto-resize constraints insufficient for your UI? Would you consider posting a screenshot of your UI for review?

2) if #1 is a NOGO then you can force the UI to display an alert or an info page when the user switches to the unsupported orientation as shown in the original post of this thread.

[Albatros78]

This message has not been recovered.

[Albatros78]

This message has not been recovered.

[Borriez]

Hi There,

I’m not able to get this sample to run properly.
I have a clean install of the latest version of your software (downloaded it yesterday).

when Running the app, the orientation display is never showed with a landscape simulator.
I have added a breakpoint here:

/**
* Notification that the UI has transition to a new page.
*
* @param {String} newPageId
*/
phoneui.postPageTransition = function(newPageId) {

//var tmp = newPageid;

//phoneui.showActivityDialog(tmp);
//setTimeout(function(){phoneui.hideActivityDialog()}, 500)

if (removeHash(newPageid) != ‘m1-orient_fail’) {
prevPageId = newPageId;
}
}

this is the exception I am getting:
<exception>: ReferenceError
message: “newPageid is not defined”
stack: (…)
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error
newPageId: “#m1-main”
this: Window

I am struggling badly.

What am I doing wrong?
Regards
Borriez

[paulD]

Just a very quick look through your code and –

var tmp = newPageid; should be newPageId to match the rest of your code.

give that a whirl

Paul

[Borriez]

@paulD wrote:

Just a very quick look through your code and –

var tmp = newPageid; should be newPageId to match the rest of your code.

give that a whirl

Paul

Hi Paul,

Thank you for your quick reply.
The line:

 //var tmp = newPageid;

was skipped as I commended it out, but this line

if (removeHash(newPageId) != 'm1-orient_fail') {

was the culprit and thank you, renaming the variable was the problem.

What I now see is that the postOrientationChange event is never raised when changing the orientation.

/**
 * Notification that device orientation has changed. 
 * 
 * @param {String} newOrientation 
 */
phoneui.postOrientationChange = function(newOrientation) {
    var isLandscape = Math.abs(newOrientation) == 90; 
    if (isLandscape) {     
        //show not supported page
        phoneui.gotoPage("m1-orient_fail",phoneui.transitions.none);
    } else { 
        //goto prev app page
        phoneui.gotoPage(prevPageId,phoneui.transitions.none);
    }
}

Why isn’t the event raised? I now ran the sample code straight from the zipped file (changing the culprit variable) and it doesn’t work. What am I doing wrong?

thank you

[paulD]

Sorry for the late reply! Been out for a day or so!

Try running the sample on a device. Not everything works in the simulator. I tried the sample project and it works.

Hope that helps

Paul

[Brandon]

Just a thought but you could always check the device height vs width…

[Author]

Posts