Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-7043 iOS 8 Support
  3. CB-7549

[StatusBar][iOS 8] Landscape issue

    XMLWordPrintableJSON

    Details

    • Type: Sub-task
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.5.0
    • Fix Version/s: None
    • Labels:
      None
    • Environment:

      Jquerymobile 1.4.3, Jquery 2.0.3, cordova 3.5 iOS, iOS 8

      Description

      not for sure if this is an xcode setting, cordova ios8 issue or jquerymobile ios8 issue. if you create a new cordova project, force it to Landscape only(phone or ipad doesnt matter), then include JqueryMobile (1.4.3) and run the project in iOS 8 the display will be chopped up into 3 sections. ReRun it in iOS 7 simulator and everything is fine. so it has something to do with being forced to Landscape. enclosed is the code i am using to recreate the problem.

      <!DOCTYPE html>
      <html>
        <head>
        <title></title>
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta name="msapplication-tap-highlight" content="no" />
            <meta name="format-detection" content="telephone=no" />
      	   <meta charset="utf-8">
           
             <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css">
            
      
        </head>
        
        
        <style type="text/css">
            
            div.div_Body {
                height: 100%;
                
                position: relative;
                border:2px solid DarkGoldenrod;
                border-radius:7px;
                font: bold 14px Arial;
                font-family:Arial, Helvetica, sans-serif;
                color:Black;
                text-align:center;
                background: #FFFFFF;
            }
      </style>
        
        
        
        <body id="body" class="noselect"  >
            <script>
                
                window.addEventListener('load', function () { document.addEventListener('deviceready', function () {onDeviceReady() }, false); }, false);
                
                /* When this function is called, PhoneGap has been initialized and is ready to roll */
                function onDeviceReady()
                {
                    console.log("in device ready");
                    console.log("height " + screen.height);
                    console.log("width " + screen.width);
                    var myscreenWidth = screen.width;
                 }
      
            </script>
            
            
            <div data-role="page" class="ui-page " data-theme="b" >
                
                <div data-role="header"   class="ui-header" data-theme="b" >
                    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Test</h1>
                </div>
                 <div data-role="content" style="height: 670px" class="ui-content div_Body" role="main">
                    <p  >Send Help</p>
                </div>
           </div>
       
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
              <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
              <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
        </body>
      </html>
      

        Attachments

          Activity

            People

            • Assignee:
              shazron Shazron Abdullah
              Reporter:
              tbh726 Tim Higgins
            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: