Экран IphoneX не покрывает верхний и нижний колонтитулы в проекте Cordova - PullRequest
Новая
       78

Экран IphoneX не покрывает верхний и нижний колонтитулы в проекте Cordova

1 голос
/ 08 октября 2019

Мое приложение не совместимо с iPhoneX, много искал и пробовал много разных вещей. Заставка хорошо отображается на каждом устройстве, но внутренние экраны не покрывают верхний и нижний колонтитулыИспользуя те же размеры изображения, которые предлагалось сделать на весь экран. Также используется view-порт в метатеге index.html, файл в заголовочном теге.

Используя cordova 7.1.0 и версии ios 4.5.4 в моем проекте cordova, приложение работает нормально на всех устройствах, но не совместимо с экраном iPhoneX. при запуске проекта на iphonex в симуляторе он оставлял пробел в верхнем и нижнем колонтитулах.

Использование приведенного ниже размера изображений для заставки и метатега в заголовке тега в файле index.html. 

<splash platform="ios" src="res/screens/ios/750x1334.png" />
        <splash platform="ios" src="res/screens/ios/1242x2208.png" />
        <splash platform="ios" src="res/screens/ios/1278x732.png" />
        <splash platform="ios" src="res/screens/ios/1334x750.png" />
        <splash platform="ios" src="res/screens/ios/1334x1334.png" />
        <splash platform="ios" src="res/screens/ios/2208x1242.png" />
        <splash platform="ios" src="res/screens/ios/2208x2208.png" />
        <splash platform="ios" src="res/screens/ios/2732x2732.png" />

и метатег в заголовке:

Ответы [ 2 ]

1 голос
/ 09 октября 2019

LaunchScreen / SplashScreen

После завершения сборки iOS перейдите на ->

Projectpath -> Platform ->iOS ->Open Project in Xcode
В Xcode
ProjectName -> Resources -> Images.xcassets -> LaunchImage enter image description here



Заголовок: Добавление плагина строки состояния Cordova
cordova plugin add cordova-plugin-statusbar

config.xml
В конфигурационном файле добавьте ниже предпочтения 

    <preference name="StatusBarBackgroundColor" value="#00458D" />
    <preference name="StatusBarStyle" value="blacktranslucent" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarDefaultScrollToTop" value="false" />

Нижний колонтитул:
На каждой странице .html добавьте ниже код внутри <head> tag 

<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
0 голосов
/ 14 октября 2019 
    @Ramprasath selvam here is my config file    
    <?xml version='1.0' encoding='utf-8'?>
        <widget id="" version="4.2.58" versionCode="29" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:gap="http://phonegap.com/ns/1.0">
            <name>Mobile App</name>
            <description>
                Mobile App.
            </description>
            <author email="" href="http://cordova.io">
                Mobile App
            </author>
            <allow-navigation href="*" />
            <content src="index.html" />
            <preference name="orientation" value="portrait" />
            <preference name="phonegap-version" value="cli-8.1.1" />
            <preference name="AutoHideSplashScreen" value="false" />
            <preference name="SplashScreenDelay" value="10000" />
            <preference name="ShowSplashScreenSpinner" value="false" />
            <preference name="android-build-tool" value="gradle" />
            <preference name="DisallowOverscroll" value="true" />
            <gap:plugin name="cordova-plugin-whitelist" source="npm" />
            <gap:plugin name="com.paypal.cordova.mobilesdk" source="npm" />
            <gap:plugin name="cordova-plugin-device" source="npm" />
            <gap:plugin name="cordova-plugin-inappbrowser" source="npm" />
            <gap:plugin name="cordova-plugin-splashscreen" source="npm" />
            <gap:plugin name="cordova-plugin-geolocation" source="npm" spec="1.0.1" />
            <gap:plugin name="cordova-plugin-network-information" source="npm" />
            <gap:plugin name="cordova-plugin-request-location-accuracy" source="npm" spec="2.2.0" />
            <gap:plugin name="cordova-plugin-x-toast" source="npm" spec="2.6.0" />
            <gap:plugin source="git" spec="https://github.com/razorpay/razorpay-cordova.git" />
            <gap:plugin name="cordova-plugin-media" source="npm" spec="3.0.0" />
            <gap:plugin name="cordova.plugins.diagnostic" source="npm" spec="4.0.3" />
            <gap:plugin name="cordova-plugin-googlemaps-plus" source="npm">
                <param name="API_KEY_FOR_ANDROID" value="AIzaSyDAwrq1ial39lAGZx6jx0WZdZ-Qg4Z94cs" />
                <param name="API_KEY_FOR_IOS" value="AIzaSyBDr3nwlBEV87jriUmR2y6vb0CeipfWczE" />
            </gap:plugin>
            <gap:plugin name="cordova-plugin-buildinfo" source="npm" spec="1.1.0" />
            <gap:plugin name="cordova-plugin-googleplus" source="npm">
                <variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.402245806775-vsnc22opbodba6qslf77631tkumik7fe" />
            </gap:plugin>
            <gap:plugin name="cordova-launch-review" source="npm" />
            <platform name="android" />
            <platform name="ios" />
            <preference name="AutoHideSplashScreen" value="false" />
            <preference name="SplashScreenDelay" value="10000" />
            <preference name="android-minSdkVersion" value="16" />
            <preference name="ShowSplashScreenSpinner" value="false" />
            <preference name="StatusBarBackgroundColor" value="#00458D" />
            <preference name="StatusBarStyle" value="blacktranslucent" />
            <preference name="StatusBarOverlaysWebView" value="false" />
            <preference name="StatusBarDefaultScrollToTop" value="false" />
            <access origin="*" />
            <access launch-external="yes" origin="tel:*" />
            <gap:config-file parent="/manifest" platform="android">
                <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
                <application android:theme="@android:style/Theme.NoTitleBar">
                </application>
            </gap:config-file>
            <preference name="phonegap-version" value="cli-7.0.1" />
            <gap:plugin name="cordova-plugin-camera" source="npm" spec="2.4.1" />
            <gap:plugin name="cordova-plugin-file-transfer" source="npm" spec="1.6.2" />
            <gap:plugin source="git" spec="https://github.com/danwilson/google-analytics-plugin.git" />
            <platform name="ios">
                <config-file parent="NSLocationAlwaysUsageDescription" platform="ios" target="*-Info.plist">
                    <string>App want to always use your location</string>
                </config-file>
                <config-file parent="NSLocationWhenInUseUsageDescription" platform="ios" target="*-Info.plist">
                    <string>App wants to use your location</string>
                </config-file>
            </platform>
            <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
                <string>need camera access to take pictures</string>
            </edit-config>
            <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
                <string>need to photo library access to get pictures from there</string>
            </edit-config>
            <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
                <string>need location access to find things nearby</string>
            </edit-config>
            <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
                <string>need to photo library access to save pictures there</string>
            </edit-config>
            <platform name="ios">
                <config-file parent="com.apple.developer.in-app-payments" target="*-Debug.plist">
                    <array>
                        <string></string>
                    </array>
                </config-file>
                <config-file parent="com.apple.developer.in-app-payments" target="*-Release.plist">
                    <array>
                        <string></string>
                    </array>
                </config-file>
            </platform>
            <platform name="android">
                <resource-file src="www/beep.wav" target="res/raw/beep.wav" />
                <icon density="ldpi" src="res/icons/android/drawable-ldpi-icon.png" />
                <icon density="mdpi" src="res/icons/android/drawable-mdpi-icon.png" />
                <icon density="hdpi" src="res/icons/android/drawable-hdpi-icon.png" />
                <icon density="xhdpi" src="res/icons/android/drawable-xhdpi-icon.png" />
                <icon density="xxhdpi" src="res/icons/android/drawable-xxhdpi-icon.png" />
                <icon density="xxxhdpi" src="res/icons/android/drawable-xxxhdpi-icon.png" />
                <splash density="land-ldpi" src="res/screens/android/drawable-land-ldpi-screen.png" />
                <splash density="land-mdpi" src="res/screens/android/drawable-land-mdpi-screen.png" />
                <splash density="land-hdpi" src="res/screens/android/drawable-land-hdpi-screen.png" />
                <splash density="land-xhdpi" src="res/screens/android/drawable-land-xhdpi-screen.png" />
                <splash density="land-xxhdpi" src="res/screens/android/drawable-land-xxhdpi-screen.png" />
                <splash density="land-xxxhdpi" src="res/screens/android/drawable-land-xxxhdpi-screen.png" />
                <splash density="port-ldpi" src="res/screens/android/drawable-port-ldpi-screen.png" />
                <splash density="port-mdpi" src="res/screens/android/drawable-port-mdpi-screen.png" />
                <splash density="port-hdpi" src="res/screens/android/drawable-port-hdpi-screen.png" />
                <splash density="port-xhdpi" src="res/screens/android/drawable-port-xhdpi-screen.png" />
                <splash density="port-xxhdpi" src="res/screens/android/drawable-port-xxhdpi-screen.png" />
                <splash density="port-xxxhdpi" src="res/screens/android/drawable-port-xxxhdpi-screen.png" />
            </platform>
            <platform name="ios">
                <icon height="57" platform="ios" src="res/icons/ios/icon.png" width="57" />
                <icon height="114" platform="ios" src="res/icons/ios/icon@2x.png" width="114" />
                <icon height="40" platform="ios" src="res/icons/ios/icon-40.png" width="40" />
                <icon height="80" platform="ios" src="res/icons/ios/icon-40@2x.png" width="80" />
                <icon height="50" platform="ios" src="res/icons/ios/icon-50.png" width="50" />
                <icon height="100" platform="ios" src="res/icons/ios/icon-50@2x.png" width="100" />
                <icon height="60" platform="ios" src="res/icons/ios/icon-60.png" width="60" />
                <icon height="120" platform="ios" src="res/icons/ios/icon-60@2x.png" width="120" />
                <icon height="180" platform="ios" src="res/icons/ios/icon-60@3x.png" width="180" />
                <icon height="72" platform="ios" src="res/icons/ios/icon-72.png" width="72" />
                <icon height="144" platform="ios" src="res/icons/ios/icon-72@2x.png" width="144" />
                <icon height="76" platform="ios" src="res/icons/ios/icon-76.png" width="76" />
                <icon height="152" platform="ios" src="res/icons/ios/icon-76@2x.png" width="152" />
                <icon height="29" platform="ios" src="res/icons/ios/icon-small.png" width="29" />
                <icon height="58" platform="ios" src="res/icons/ios/icon-small@2x.png" width="58" />
                <icon height="87" platform="ios" src="res/icons/ios/icon-small@3x.png" width="87" />
                <icon height="1024" platform="ios" src="res/icons/ios/icon@xcopy.png" width="1024" />
                <splash platform="ios" src="res/screens/ios/750x1334.png" />
                <splash platform="ios" src="res/screens/ios/1242x2208.png" />
                <splash platform="ios" src="res/screens/ios/1278x732.png" />
                <splash platform="ios" src="res/screens/ios/1334x750.png" />
                <splash platform="ios" src="res/screens/ios/1334x1334.png" />
                <splash platform="ios" src="res/screens/ios/2208x1242.png" />
                <splash platform="ios" src="res/screens/ios/2208x2208.png" />
                <splash platform="ios" src="res/screens/ios/2732x2732.png" />
            </platform>
            <engine name="android" spec="^6.4.0" />
            <engine name="osx" spec="^4.0.1" />
            <engine name="ios" spec="^4.5.4" />
            <engine name="browser" spec="^5.0.3" />
            <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
            <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
            <plugin name="cordova-plugin-network-information" spec="^2.0.1" />
            <plugin name="cordova-plugin-device" spec="^2.0.1" />
            <plugin name="cordova-plugin-googleplus" spec="^5.2.1">
                <variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.402245806775-vsnc22opbodba6qslf77631tkumik7fe" />
            </plugin>
            <plugin name="cordova-plugin-x-toast" spec="^2.6.0" />
            <plugin name="cordova-plugin-googlemaps-plus" spec="^1.4.1">
                <variable name="API_KEY_FOR_IOS" value="AIzaSyBDr3nwlBEV87jriUmR2y6vb0CeipfWczE" />
            </plugin>
            <plugin name="cordova.plugins.diagnostic" spec="^4.0.3" />
            <plugin name="cordova-plugin-facebookads" spec="^4.23.2" />
            <plugin name="cordova-plugin-inappbrowser" spec="^2.0.2" />
            <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
            <plugin name="cordova-plugin-buildinfo" spec="^2.0.1" />
            <plugin name="cordova-plugin-geolocation" spec="^4.0.1" />
            <plugin name="cordova-launch-review" spec="^3.1.1" />
            <plugin name="cordova-plugin-firebase" spec="^0.1.20" />
            <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="^4.2.1">
                <variable name="OKHTTP_VERSION" value="3.+" />
                <variable name="LOCATION_USAGE_DESCRIPTION" value="This app requires access to your location for navigation purposes" />
            </plugin>
            <plugin name="cordova-plugin-camera" spec="^2.4.1">
                <variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
                <variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
            </plugin>
            <plugin name="cordova-plugin-request-location-accuracy" spec="git+https://github.com/bastikikang/cordova-plugin-request-location-accuracy.git">
                <variable name="PLAY_SERVICES_VERSION" value="11.6.2" />
            </plugin>
            <plugin name="com.cmackay.plugins.googleanalytics" spec="^1.0.4">
                <variable name="ANALYTICS_VERSION" value="11.6.2" />
            </plugin>
            <plugin name="cordova-plugin-google-analytics" spec="^1.8.6">
                <variable name="GMS_VERSION" value="11.0.1" />
            </plugin>
            <plugin name="cordova-plugin-statusbar" spec="^2.3.0" />
            <plugin name="cordova-plugin-applepay" spec="^5.0.0" />
            <plugin name="cordova-plugin-console" spec="^1.1.0" />
            <plugin name="com.paypal.cordova.mobilesdk" spec="^3.5.0" />
        </widget>


Inside index file: 
<script type="text/ons-template" id="home1.html">
  <ons-navigator title="Navigator" var="sNavigator"> 
    <ons-page id="page-home1" on-device-backbutton="exitKApp();">
 <!--      <div class="full_bg">
      <div class="logSection">
      <img src="css/images/FS-Logo-117.9x116.8.png" class="centerimg">
      <p class="FoodSquireText mt10">FoodSquire</p>
       <span class="textspan">Local Delivery <br> and Easier Pickup</span>
      </div>

       <div class="externalDiv">
          <button class="SeeBtn" onclick="showSignupForm();">GET STARTED</button>
           <div class="registerBtn">
          <button class="alreadyactBtn" onclick="showLogin(1);">I already have an account  <i class="material-icons IconsAlign arrow-right pdr5">arrow_forward</i></button> </div>
        </div>
        </div>  --> 

         <!-- New design By Balvant-->

        <section id="new-external-homepage">
          <div class="image">
            <img src="css/images/mixed-plate.png" alt="">
          </div>
          <div class="bottom">
            <img src="css/images/food-squire-logo-white.svg" class="logo" alt="">
            <h1>LOCAL DELIVERY AND <br> EASIER PICKUP</h1>
            <div>
              <button onclick="showSignupForm();">GET STARTED</button>
            </div>
            <div>
              <a href="javascript:void(0)" onclick="showLogin(1);">I already have an account <img src="css/images/right-arrow-1.svg" alt=""></a>
              <div onClick="applePay()">apple pay</div>
            </div>
          </div>
        </section>

        <!-- end -->

  </ons-page>
</ons-navigator >
</script>
...