Featured

Prevent landscape orientation of Iphone web apps

 Prevent landscape orientation of Iphone web apps Prevent landscape orientation of Iphone web apps

This book gives you a great introduction to IOS Xcode programming. If you follow this, you can create an IOS app in a couple of hours time. I highly recommend this book to all beginners to IOS – Xcode development.

Get it Now
 

prevent landscape orientation iphone Prevent landscape orientation of Iphone web apps

I have tried several techniques to prevent landscape orientation for mobile web applications in iPhone. But none of them was not working properly. Finally the only solution which I could find is the below one. Here I displays a screen to rotate the device to portrait if the orientation is landscape. There is actually two steps involved in this method.

Step-1: Create a div with overlay and hide it in the page. In my case I have used the div with a background image and text. You can copy the below style and image if you want.

<div id="landscape"><p><b>Rotate Device to Portrait"</b></p></div>
 
#landscape{
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000000;
  width: 100%;
  height: 400px;
 display: none;
 z-index: 20000;
 opacity: 0.9;
}
#landscape p{
    background: url("../images/landscape.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    height: 65px;
    left: 30%;
    padding-top: 106px;
    position: absolute;
    top: 20%;
    width: 85px;
    opacity: 1;
}
 
#landscape p b{
     width: 100px;
     display: block;
     text-align: center;
     margin-left: 20px;
}

You can download the landscape.png from below.

landscape Prevent landscape orientation of Iphone web apps


Step-2: Add the below script in the js file.

 
    // Listen for resize changes
    window.addEventListener("resize", function() {
 
          if( window.outerWidth > window.outerHeight )
          {
              window.scrollTo(1,1);
              $('#landscape').show();
              lockScroll();
          }
          else{
               $('#landscape').hide();
               unLockScroll();
          }
 
 }, false);

There are two functions lockScroll() and unLockScroll() which are used to prevent scrolling of the webpage.

function lockScroll()
{
     $(document).bind("touchmove",function(event){
                        event.preventDefault();
     });
}
 
function unLockScroll()
{
    $(document).unbind("touchmove");
}

Tagged , , , ,

Share this to

Related Posts

8 Comments

  1. RemixMakerAug 2, 2012 at 12:39 pmReply

    It does not work. Can you please make a demo page or send me a code, because I need it :)

    • adminAug 7, 2012 at 12:52 pmReplyAuthor

      Could you upload the code somewhere ? so that I can check it

  2. EricOct 3, 2013 at 3:06 pmReply

    Here below, the code adapted to be used without any Javascript.
    Enjoy,

    —- HTML —-

    Rotate Deviceto Portrait

    —- End HTML —–
    —- CSS —
    /* Portrait */
    @media screen and (orientation:portrait) {
    body {
    background-color: #FF0000; opacity: 1; }
    #landscape {visibility:hidden; }
    #rotateplease {visibility:hidden; }
    }

    /* Landscape */
    @media screen and (orientation:landscape) {
    body { background-color: #FF0000; opacity: 1; }
    #content {visibility:hidden;}
    #landscape {visibility:visible;}
    #rotateplease {visibility:visible;}
    }
    #landscape{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #000000;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    }
    #rotateplease {
    background: url(“../images/landscape.png”) no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    position: absolute;
    height: 145px;
    width: 170px;
    top: 20%;
    left: 30%;
    padding-top: 85px;
    text-align: center;
    opacity: 1;
    }

    #rotateplease p b{
    width: 170px;
    margin-left: 0px;
    }
    —- End CSS —

    • joeyOct 9, 2013 at 11:12 amReply

      your css is a bit funky,

      however with a bit of modifying it works well

      note-
      #rotateplease
      url( ‘landscape.png ‘) not ( “landscape.png” )

      I changed the opacity of #landscape to 0 and used

      body
      { background-image } pointing to landscape.png
      with norepeat and center centre

      here

      /* Landscape */
      @media screen and (orientation:landscape) {
      body { background-color: #000000; opacity: 0; background-image: url(‘landscape.png’); background-repeat: no-repeat; background-position: center center; }
      #content {visibility:hidden;}
      #landscape {visibility:visible;}
      #rotateplease {visibility:visible;}
      }
      #landscape{
      position: absolute;
      top: 0px;
      left: 0px;
      background-color: #000000;
      width: 100%;
      height: 100%;
      opacity: 0.1;
      }
      #rotateplease {
      background: url(‘landscape.png’) no-repeat scroll 0 0 transparent;
      color: #FFFFFF;
      position: absolute;
      height: 145px;
      width: 170px;
      top: 20%;
      left: 30%;
      padding-top: 85px;
      text-align: center;
      opacity: 1;
      }

      #rotateplease p b{
      width: 170px;
      margin-left: 0px;
      }

  3. joeyOct 9, 2013 at 11:17 amReply

    *** EDIT ***

    for some reason the landscape image takes too long to load when switching to landscape.

    Solution:

    preload the image with

    CSS

    #rotate { background: url(images/grass.png) no-repeat -9999px -9999px; }

    HTML

  4. Abhimanyu RanaJan 29, 2014 at 1:30 pmReply

    @media (orientation: landscape) {
    body {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }
    }

  5. DFeb 26, 2014 at 5:33 pmReply

    As others have pointed out, the iPhone supports orientation-specific CSS natively. There is no need to use Javascript.

  6. Solution: How do I lock the orientation to portrait mode in a iPhone Web Application? #development #fix #solution | IT InfoJan 15, 2015 at 8:33 pmReply

    […] idea of telling the user to put his phone back into portrait mode. Like it’s mentioned here: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ …but utilizing CSS instead of […]

Leave a reply

Your email address will not be published. Required fields are marked *

*

About
View Sarath D R's profile on LinkedIn

I am a technology consultant and an entrepreneur focused on the following technologies Java,Spring, Android, Angular, Asterisk, Symfony, Cake , Code-Igniter, Jquery , XAMPP, XHTML, AJAX, MySql, Seo, Web Design, Wordpress, iPhone development.

Today’s Tips
  • Generate Codova.jar file from Phonegap project using ant
  • Google map javascript client  to find the geographic co-ordinates  from  Address or post code
  • Update Android main UI from Webview – Phonegap Plugin
  • Jplayer is not working  with HTC One Android 4.3 version browser
  • Regular expression to validate mobile phone numbers starting with + ( plus ) – php
  • Simple pagination script for PHP
  • Useful adb ( Android Debug Bridge ) commands
  • Change the javascript files url to absolute url – Symfony 1.4
  • Set Http authentication header from Client – PHP / CURL

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.This site also uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.

Close