0 Replies Latest reply on Mar 7, 2018 11:03 PM by nethrami49195622

    I phone X screen compatible issue.

    nethrami49195622

      I have built a phone gap application for iphoneX. Which is built using cordova. And i got stuck with some issues when i implement this ios app in actual iphoneX. Issue is that the app not taking whole screen and i can see only some portion of the actual application. I tried a lot of option as said in phonegap docs for iphone x and other internet resources. But still i can not fit this application in iphoneX. Here i am attaching my codes for index.html and config.xml in www directory.

       

      index.html

       

      <!DOCTYPE html>

      <html>

          <head>

              <meta charset="utf-8">

              <title>Smart Prompt</title>

       

       

              <!-- Sets initial viewport load and disables zooming  -->

              <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

              <meta name="format-detection" content="telephone=no">

       

       

              <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->

              <meta name="apple-mobile-web-app-capable" content="yes">

              <meta name="apple-mobile-web-app-status-bar-style" content="black">

       

       

              <!-- Include the compiled Ratchet CSS -->

              <link href="css/bootstrap.min.css" rel="stylesheet"> 

              <link href="css/ratchet.css" rel="stylesheet">

              <link href="css/ratchet-theme-ios.min.css" rel="stylesheet">

              <link href="css/font-awesome.min.css" rel="stylesheet">

              <link href="css/smartprompt.css" rel="stylesheet">

              <!-- <script type="text/javascript"  src="cordova.js"></script> -->

              <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

              <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

              <script type="text/javascript" src="js/dialer.js"></script>

          </head>

          <body>

       

       

              <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->

              <div class="content">

       

       

                  <div id="dialer">

                      <div class="row" style="padding-top:9%;padding-left:4%;padding-right:4%;">

       

       

       

       

                          <div id="call-number" class="text-center" style="padding-left: 15px; padding-right: 15px;">

                              <div style="width: 10%; float: left; padding-top: 15px">

                                  <a href="#" class="btn-primary btn-outlined"><span class="icon icon-plus"></span></a>

                              </div>

                              <div style="width: 80%; float: left; height: 50px; ">

                                  <input style="height: 40px;padding-top:18px; line-height: 40px;" type="text" id="number" readonly />

                              </div>

                              <div style="width: 10%; float: left; padding-top: 15px">

                                  <a href="#" id="backspace" class="btn-primary btn-outlined"><span class="icon icon-close"></span></a>

                              </div>

                          </div>

       

       

                      </div>

                      <!--

                      <div id="call-number" class="text-center">

                          <a href="#"class="btn-primary btn-outlined"><span class="icon icon-plus"></span></a>

                          <input type="text" id="number" readonly />

                          <a href="#" id="backspace" class="btn-primary btn-outlined"><span class="icon icon-close"></span></a>

                      </div> <!-- /numbers -->

       

       

                      <!-- 1 2 3 -->

                      <div class="row" style="margin-top:9%;">

                          <div class="dialer-row">

                              <div class="text-center">

                                  <a href="#" id="buttonOne"><font>1 </font><span> </span></a>

                                  <a href="#" id="buttonTwo"><font>2 </font><span>A B C</span></a>

                                  <a href="#" id="buttonThree"><font>3 </font><span>D E F</span></a>

                              </div>

                          </div>

       

       

                          <!-- 4 5 6 -->

                          <div class="dialer-row">

                              <div class="text-center">

                                  <a href="#" id="buttonFour"><font>4 </font><span>G H I</span></a>

                                  <a href="#" id="buttonFive"><font>5 </font><span>J K L</span></a>

                                  <a href="#" id="buttonSix"><font>6 </font><span>M N O</span></a>

                              </div>

                          </div>

       

       

                          <!-- 7 8 9 -->

                          <div class="dialer-row">

                              <div class="text-center">

                                  <a href="#" id="buttonSeven"><font>7 </font><span>P Q R S</span></a>

                                  <a href="#" id="buttonEight"><font>8 </font><span>T U V</span></a>

                                  <a href="#" id="buttonNine"><font>9 </font><span>W X Y Z</span></a>

                              </div>

                          </div>

       

       

                          <!-- * 0 # -->

                          <div class="dialer-row">

                              <div class="text-center">

                                  <a href="#" id="buttonStar">*</a>

                                  <a href="#" id="buttonZero"><font>0 </font><span>+</span></a>

                                  <a href="#" id="buttonPound">#</a>

                              </div>

                          </div>

       

       

                          <!-- phone -->

                          <div class="dialer-row">

                              <div class="text-center">

                                  <a href="#" id="call"><i class="fa fa-phone"></i></a>

                              </div>

                          </div>

       

       

                      </div> <!-- /dialer -->

       

       

                  </div>

       

       

                  <div class="" id="dialer-buttons">

                      <div class="col-xs-12">

                          <img src="img/dialer-bar_new.png" alt="dialer-bar" width="" height="" />

                      </div>

                  </div>

       

       

              </div> <!-- /content -->

       

       

          </body>

      </html>

       

       

       

       

       

       

       

       

      config.xml

       

       

       

       

      <?xml version="1.0" encoding="UTF-8"?>

       

       

      <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->

      <widget xmlns     = "http://www.w3.org/ns/widgets"

              xmlns:gap = "http://phonegap.com/ns/1.0"

              id        = "com.phonegap.helloworld"

              version   = "1.0.0">

       

       

          <name>Application1</name>

       

       

          <description>

              2015 Smart Prompt Prototype for iOS.

          </description>

       

       

          <author href="http://example.com" email="chris.example@test.com">

              Chris McCorkle

          </author>

       

       

          <!--

              If you do not want any permissions to be added to your app, add the

              following tag to your config.xml; you will still have the INTERNET

              permission on your app, which PhoneGap requires.

          -->

          <preference name="permissions"                value="none"/>

          <preference name="KeyboardShrinksView" value="false"/>

          <!-- Customize your app and platform with the preference element. -->

          <preference name="orientation"                value="portrait" />        <!-- all: default means both landscape and portrait are enabled -->

          <preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->

          <preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->

          <preference name="SplashScreen"               value="splash" />

          <preference name="webviewbounce"              value="false" />           <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->

          <preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->

          <preference name="stay-in-webview"            value="false" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->

          <preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->

          <preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->

          <preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->

          <preference name="show-splash-screen-spinner" value="true" />           <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->

          <preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->

          <preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->

          <preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->

          <preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

          <!--

              Define a specific version of PhoneGap to build into your app.    -->

              <preference name='phonegap-version' value='cli-6.5.0' />

       

       

       

       

          <!-- Plugins -->

       

       

          <!-- Core plugins -->

          <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.2" />

          <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />

          <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />

          <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />

          <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />

          <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />

          <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />

          <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />

          <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />

          <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />

          <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />

          <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />

          <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />

          <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />

          <plugin name="cordova-plugin-media" source="npm" spec="~3.0.1" />

          <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />

          <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />

          <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />

          <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />

      <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.3.1" />

          <plugin name="cordova-plugin-whitelist" version="1" />

       

       

          <!-- Third party plugins -->

          <!-- A list of available plugins are available at https://build.phonegap.com/plugins -->

          <!--

              <gap:plugin name="com.phonegap.plugins.barcodescanner" />

          -->

       

       

          <!-- Define app icon for each platform. -->

          <icon src="icon.png" />

          <icon src="res/icon/android/icon-36-ldpi.png"   platform="android"    qualifier="ldpi" />

          <icon src="res/icon/android/icon-48-mdpi.png"   platform="android"    qualifier="mdpi" />

          <icon src="res/icon/android/icon-72-hdpi.png"   platform="android"    qualifier="hdpi" />

          <icon src="res/icon/android/icon-96-xhdpi.png"  platform="android"    qualifier="xhdpi" />

          <icon src="res/icon/blackberry/icon-80.png"     platform="blackberry" />

          <icon src="res/icon/blackberry/icon-80.png"     platform="blackberry" state="hover"/>

           <!-- Icon for iphone6 -->

          <icon src="res/icon/ios/icon-180.png"         platform="ios"       width="180" height="180" />

          <icon src="res/icon/ios/icon-120.png"         platform="ios"       width="120" height="120" />

          <icon src="res/icon/webos/icon-64.png"          platform="webos" />

          <icon src="res/icon/windows-phone/icon-48.png"  platform="winphone" />

          <icon src="res/icon/windows-phone/icon-173.png" platform="winphone"   role="background" />

       

       

          <!-- Define app splash screen for each platform. -->

          <!-- iphoneX splash screen -->

          <gap:splash height="2436" platform="ios" src="res/screen/ios/Default-2436.png" width="1125"/>

          <gap:splash height="2048" platform="ios" src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />

          <splash height="1136" platform="ios" src="res/screen/ios/Default-568h@2x~iphone.png" width="640" />

         

       

       

          <gap:config-file platform="ios" parent="CFBundleShortVersionString">

          <string>100</string>

          </gap:config-file>

       

       

          <!--

              Define access to external domains.

       

       

              <access />            - a blank access tag denies access to all external resources.

              <access origin="*" /> - a wildcard access tag allows access to all external resource.

       

       

              Otherwise, you can specify specific domains:

       

       

              <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/

              <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/

              <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.

          -->

       

       

          <access origin="*"/>

          <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->

          <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->

          <plugin name="cordova-plugin-whitelist" version="1" />

          <allow-intent href="http://*/*" />

          <allow-intent href="https://*/*" />

          <allow-intent href="tel:*" />

          <allow-intent href="sms:*" />

          <allow-intent href="mailto:*" />

          <allow-intent href="geo:*" />

          <platform name="android">

              <allow-intent href="market:*" />

          </platform>

          <platform name="ios">

              <allow-intent href="itms:*" />

              <allow-intent href="itms-apps:*" />

          </platform>

       

       

      </widget>