屏幕尺寸問題與iPhone上的離子X

我正試圖導出我的應用程序在離子3。但是當我在iPhone X模擬器中啓動時，屏幕頂部和底部有兩個空的空間（屏幕問題？）。屏幕尺寸問題與iPhone上的離子X

任何人都有助於調整分辨率到iPhone X的分辨率？

來源

2017-09-13 Pako Navarro

[iPhone X全屏問題（HTTPS的可能重複： //stackoverflow.com/questions/46190975/iphone-x-full-screen-issue） – rmaddy

更多的信息在： http://blog.ionic.io/updates-for-all-ionic-angular-3-7-和更多/ –

與Titanium SDK有相同的問題。問題是，你需要提供正確的推出，屏幕，適應新的屏幕尺寸： -

肖像：1125x2436
景觀：2436x1125

鈦，它只是解決了通過調整構建腳本來檢測和打包啓動屏幕，因此Ionic團隊很快可能會做類似的事情！

對於本機的Xcode，這個問題可以是相同的，並且通過將正確的圖像導入資產目錄解析：

來源

2017-09-13 12:46:37

爲了刪除空的空間，你可以添加viewport-fit=cover到您的meta標籤：

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

來源

2017-09-15 14:49:34

科爾多瓦插件狀態欄更新爲iPhoneX在2.3.0工作請檢查release notes

來源

2017-11-14 12:10:45

添加適當的啓動圖像爲iPhone X Launch image adding help link

然後按照這些

對於手動修復到現有的科爾多瓦項目

UI界面問題

添加到您的Info.plist文件。固定發射圖像是一個獨立的問題

<key>UILaunchStoryboardName</key> 
<string>CDVLaunchScreen</string>

集視合=蓋在meta標籤

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

More help

來源

2018-01-10 07:51:58 Haza

首先，添加viewport-fit=cover到index.html meta標籤

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

然後，狀態欄插件PR已經m請安裝。請安裝最新的穩定版本的cordova狀態欄。

ionic cordova plugin rm cordova-plugin-statusbar 
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

接下來，將此CSS添加到您的src/app/app中。SCSS：

<style> 
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) { 
    height: calc(44px + constant(safe-area-inset-top)); 
} 


.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * { 
    margin-top: constant(safe-area-inset-top); 
} 

div.tab-nav.tabs { 
    height: calc(49px + constant(safe-area-inset-bottom)); 
} 

ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs { 
    top: calc(64px + constant(safe-area-inset-top)); 
} 
</style>

最後一個，添加爲iPhone X中的1125×2436尺寸的啓動畫面，給它的路徑index.html

<splash src="resources/ios/splash/[email protected]~iphone.png" width="1125" height="2436"/>

來源

2018-01-23 07:26:36

屏幕尺寸問題與iPhone上的離子X

回答

相關問題