แอพ Cordova แสดงไม่ถูกต้องบน iPhone X (Simulator)

121

ฉันทดสอบแอปที่ใช้ Cordova เมื่อวานนี้บน iPhone X Simulator ใน Xcode 9.0 (9A235) และมันดูไม่ดี ประการแรกแทนที่จะเติมเต็มพื้นที่หน้าจอมีพื้นที่สีดำด้านบนและด้านล่างของเนื้อหาแอป และที่แย่กว่านั้นคือระหว่างเนื้อหาของแอปและแถบสีดำคือแถบสีขาวสองแถบ

การเพิ่มcordova-plugin-wkwebview-engineเพื่อให้ Cordova แสดงผลโดยใช้ WKWebView (ไม่ใช่ UIWebView) จะแก้ไขแถบสีขาว โดยแอปของฉันไม่ได้ย้ายจาก UIWebView ไปยัง WKWebView เนื่องจากปัญหาด้านประสิทธิภาพและหน่วยความจำรั่วเมื่อใช้งานcordova-plugin-wkwebview-engineซึ่งเกิดขึ้นเมื่อโหลดภาพที่ดาวน์โหลดจาก Inapp Purchase เนื้อหาที่โฮสต์ลงในผ้าใบ HTML5 ( file://ไม่สามารถเข้าถึงโดยตรงโดย Webview ได้เนื่องจากข้อ จำกัด ด้านความปลอดภัยใน WKWebView ดังนั้น ต้องโหลดข้อมูลภาพผ่านcordova-plugin-file)

ภาพหน้าจอเหล่านี้แสดงแอปทดสอบที่มีพื้นหลังสีน้ำเงินตั้งค่าไว้ที่<body> ด้านบนและด้านล่าง UIWebView คุณจะเห็นแถบสีขาว แต่ไม่ใช่ใน WKWebView:


(ที่มา: pbrd.co )


(ที่มา: pbrd.co )

Cordova Webviews ทั้งสองแสดงพื้นที่สีดำเมื่อเทียบกับแอพเนทีฟที่เติมเต็มพื้นที่เต็มหน้าจอ:

ios  cordova  phonegap  iphone-x 
— DaveAlden
แหล่งที่มา
น่าสนใจกับ wkwebview ในเกมของฉันฉันมีมันไม่เต็มความกว้าง แต่ยังหักล้างจากศูนย์กลาง ใน uiwebview ยังคงมีขนาดเท่าเดิม แต่อย่างน้อยก็อยู่ตรงกลาง
— agmcleod
ฉันมีปัญหานี้เช่นกันดังนั้นฉันจึงแก้ปัญหาบางอย่างด้วย css ดูที่pt.stackoverflow.com/a/263460/55076
— Igor Trindade
ฉันกำลังมีปัญหานี้เหมือนกัน เพียงแค่เพิ่ม<meta>แท็กลงในไฟล์ cordova index.hml ของฉันเนื่องจากคนอื่น ๆ ที่ระบุไว้ด้านล่างไม่ทำงาน ฉันใช้ Cordova 7x กับ Cordova-ios 4.5.4 - มีอะไรอีกบ้างที่ฉันต้องทำ?
— rolinger

คำตอบ:

246

ฉันพบวิธีแก้ไขแถบสีขาวที่นี่ :

ตั้งค่าviewport-fit=coverบน<meta>แท็กวิวพอร์ตได้แก่ :

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

แถบสีขาวใน UIWebView จะหายไป:

วิธีการเอาพื้นที่สีดำ (โดย@dpogueในความคิดเห็นด้านล่าง) คือการใช้ภาพ LaunchStoryboardด้วยcordova-plugin-splashscreenที่จะเปลี่ยนภาพการเปิดตัวเดิมที่ใช้โดยคอร์โดวาโดยค่าเริ่มต้น ในการทำเช่นนั้นให้เพิ่มสิ่งต่อไปนี้ในแพลตฟอร์ม iOS ในconfig.xml:

<platform name="ios">    
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />   

    <!-- more iOS config... -->
</platform>

จากนั้นสร้างภาพที่มีขนาดต่อไปนี้ในres/screen/ios(ลบภาพที่มีอยู่ออก):

Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732

เมื่อลบแถบสีดำออกแล้วยังมีอีกสิ่งหนึ่งที่แตกต่างออกไปเกี่ยวกับ iPhone X ที่จะกล่าวถึง: แถบสถานะมีขนาดใหญ่กว่า 20px เนื่องจาก "รอย" ซึ่งหมายความว่าเนื้อหาใด ๆ ที่อยู่ด้านบนสุดของแอป Cordova ของคุณจะถูกบดบังด้วย :

แทนที่จะเข้ารหัสช่องว่างภายในพิกเซลคุณสามารถจัดการสิ่งนี้โดยอัตโนมัติใน CSS โดยใช้safe-area-inset-*ค่าคงที่ใหม่ใน iOS 11

หมายเหตุ:ใน iOS 11.0 มีการเรียกใช้ฟังก์ชันในการจัดการค่าคงที่เหล่านี้constant()แต่ใน iOS 11.2 Apple เปลี่ยนชื่อเป็นenv()( ดูที่นี่ ) ดังนั้นเพื่อให้ครอบคลุมทั้งสองกรณีคุณต้องโอเวอร์โหลดกฎ CSS ด้วยทั้งสองและพึ่งพากลไกทางเลือกของ CSSเพื่อใช้ อันที่เหมาะสม:

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

ผลลัพธ์ก็เป็นไปตามที่ต้องการเนื้อหาของแอปครอบคลุมเต็มหน้าจอ แต่ "รอย" ไม่บดบัง:

ฉันได้สร้างโครงการทดสอบ Cordova ซึ่งแสดงขั้นตอนข้างต้น: webview-test.zip

หมายเหตุ:

ปุ่มส่วนท้าย

  • หากแอปของคุณมีปุ่มส่วนท้าย (เหมือนของฉัน) คุณจะต้องสมัครsafe-area-inset-bottomเพื่อหลีกเลี่ยงไม่ให้ปุ่มโฮมเสมือนทับซ้อนกันบน iPhone X
  • ในกรณีของฉันฉันไม่สามารถใช้สิ่งนี้ได้<body>เนื่องจากส่วนท้ายอยู่ในตำแหน่งที่แน่นอนดังนั้นฉันจึงต้องใช้มันโดยตรงกับส่วนท้าย:

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

Cordova-ปลั๊กอินสถานะ

  • ขนาดแถบสถานะมีการเปลี่ยนแปลงบน iPhone X ดังนั้นเวอร์ชันเก่าจึงcordova-plugin-statusbarแสดงผลไม่ถูกต้องบน iPhone X
  • Mike Hartingtonได้สร้างคำขอดึงนี้ซึ่งใช้การเปลี่ยนแปลงที่จำเป็น
  • สิ่งนี้ถูกรวมเข้ากับcordova-plugin-statusbar@2.3.0รุ่นดังนั้นโปรดตรวจสอบให้แน่ใจว่าคุณใช้อย่างน้อยเวอร์ชันนี้เพื่อใช้กับสิ่งที่ใส่เข้าไปในพื้นที่ปลอดภัย

หน้าจอ

  • ข้อ จำกัด ของกระดานเรื่องราวของ LaunchScreen เปลี่ยนไปใน iOS 11 / iPhone X ซึ่งหมายความว่าหน้าจอเริ่มต้นจะ "กระโดด" เมื่อเปิดตัวเมื่อใช้ปลั๊กอินเวอร์ชันที่มีอยู่ ( ดูที่นี่ )
  • สิ่งนี้ถูกบันทึกไว้ในรายงานข้อผิดพลาดCB-13505 , PR Cordova-ios # 354 ที่ได้รับการแก้ไขและเผยแพร่ในcordova-ios@4.5.4ดังนั้นโปรดตรวจสอบว่าคุณกำลังใช้cordova-iosแพลตฟอร์มเวอร์ชันล่าสุด

การวางแนวอุปกรณ์

  • เมื่อใช้ UIWebView บน iOS 11.0 การหมุนจากแนวตั้ง> แนวนอน> แนวตั้งทำให้safe-area-insetไม่สามารถนำไปใช้ซ้ำได้ทำให้เนื้อหาถูกบดบังด้วยรอยบากอีกครั้ง (ดังที่เน้นโดยjmsในความคิดเห็นด้านล่าง)
  • นอกจากนี้ยังเกิดขึ้นหากเปิดแอปในแนวนอนแล้วหมุนเป็นแนวตั้ง
  • นี้ไม่ได้เกิดขึ้นเมื่อใช้ WKWebView cordova-plugin-wkwebview-engineผ่าน
  • รายงานเรดาร์: http://www.openradar.me/radar?id=5035192880201728
  • อัปเดต : ดูเหมือนว่าจะได้รับการแก้ไขแล้วใน iOS 11.1

สำหรับการอ้างอิงนี่เป็นปัญหา Cordova ดั้งเดิมที่ฉันเปิดซึ่งรวบรวมสิ่งนี้: https://issues.apache.org/jira/browse/CB-13273

— DaveAlden
แหล่งที่มา
3
คุณมีปัญหาเมื่อหมุนหน้าจอหรือไม่? ฉันพยายามแล้ว แต่หลังจากหมุนหน้าจอทุกอย่างก็พัง (พื้นที่ปลอดภัย - สิ่งที่ใส่เข้าไป - * ไม่อัปเดตค่าขึ้นอยู่กับการวางแนวอุปกรณ์และหลังจากหมุนแนวตั้ง -> แนวนอน -> แนวตั้งอีกครั้งค่าเริ่มต้นก็เสียเช่นกัน ) อาจเป็นปัญหากับเบราว์เซอร์ apple / safari หรือไม่?
— Juan Miguel S.
1
ในกรณีของฉันเมื่อฉันเพิ่มviewport-fit=coverแอพทั้งหมดของฉันจะแสดงหน้าจอสีขาวว่างเปล่าและไม่มีอะไรอื่น ฉันใช้ iOS11, Xcode9 บน iPhone 7 Plus ใครประสบพฤติกรรมคล้าย ๆ กัน
— Dimitri
1
@DaveAlden - ดูเหมือนว่าใน 11.2 เบต้า + พวกเขาลดลงconstantสำหรับenvคำหลัก - ดูเพิ่มเติมที่: webkit.org/blog/7929/designing-websites-for-iphone-x
— Brent
1
คุณใส่รหัส body css ไว้ที่ไหนในแอปของคุณ ชอบในไฟล์ไหน ไม่มีอะไรได้ผลสำหรับฉันฉันใช้ Ionic 3
— Dimitri
2
มีการอัปเดตเกี่ยวกับปัญหาการหมุนหรือไม่? ฉันใช้ iOS 12 และประสบปัญหาเดียวกัน ดูแปลกสำหรับฉันที่ปัญหานี้ยังคงมีอยู่ / cc @jms
— a - m
36

สำหรับการแก้ไขด้วยตนเองสำหรับโครงการ Cordova ที่มีอยู่

แถบสีดำ

เพิ่มสิ่งนี้ในไฟล์info.plistของคุณ การแก้ไขรูปภาพเปิดตัวเป็นปัญหาที่แยกต่างหากเช่นวิธีเพิ่มรูปภาพเปิดตัว iPhoneX

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

แถบสีขาว

ตั้งค่า viewport-fit = cover ในเมตาแท็ก

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
— coder
แหล่งที่มา
ขอบคุณ! การเปลี่ยนแปลง. plist มีผลเช่นเดียวกับการเปลี่ยนแปลงจากคำตอบที่เลือก แต่จะเร็วกว่า
— 2Fwebd
แต่ละงานเหล่านี้ทำอะไรกับความสูงและความกว้างของพิกเซล CSS? แอพของฉันมีชุดของ div แคบ ๆ ที่ด้านบน (เมนู ฯลฯ ) ... จากนั้นฉันจะคำนวณความสูงของพิกเซลที่เหลือเพื่อให้ DIV สุดท้ายเติมเต็มส่วนที่เหลือของหน้าจอ ตอนนี้ฉันสามารถเห็นแถบสีขาวด้านล่างครอบคลุม DIV บางส่วน แต่ฉันยังบอกได้ไม่ทั้งหมด - หมายความว่า DIV ยังไม่ไปที่ด้านล่างของหน้าจอ และในทางกลับกันแอปของฉันจะเริ่มต้นใต้แถบสีขาวด้านบนดังนั้นจึงไม่ได้พยายามใช้พื้นที่ด้านบน
— rolinger
ฉันใช้UILaunchStoryboardNameและมันจัดการลบแถบสีดำ แต่หน้าจอเริ่มต้นของฉันขยายใหญ่ขึ้น เหตุผลใด? คำตอบที่ยอมรับไม่ได้ผลสำหรับฉัน
— Huiting
@coder ขอบคุณ - แต่การเพิ่ม UILaunchStoryboardName ไปยัง plist ทำให้ฉันไม่สามารถส่งไปยัง app store ได้: ERROR ITMS-90705: "ไม่พบสตอรี่บอร์ดที่เปิดตัวตรวจสอบให้แน่ใจว่าคุณระบุชื่อไฟล์การเปิดตัวสตอรี่บอร์ดโดยไม่มีนามสกุลไฟล์สำหรับคีย์ UILaunchStoryboardName ใน Info.plist "
— Matt Roberts
@ Huiting คุณพบวิธีแก้ปัญหาเกี่ยวกับกรณีของคุณหรือไม่?
— LMaker
16

มี 3 ขั้นตอนที่คุณต้องทำ

สำหรับแถบสถานะ iOs 11 และปัญหาส่วนหัวของ iPhone X

1. ฝาครอบวิวพอร์ตพอดี

เพิ่มviewport-fit=coverในเมตาดาต้าของวิวพอร์ตของคุณ<header>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

การสาธิต: https://jsfiddle.net/gq5pt509 (index.html)

  1. เพิ่มภาพสแปลชให้มากขึ้นconfig.xmlภายในของคุณ<platform name="ios">

อย่าข้ามขั้นตอนนี้สิ่งนี้จำเป็นเพื่อให้พอดีกับหน้าจอสำหรับiPhone Xทำงาน

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

การสาธิต: https://jsfiddle.net/mmy885q4 (config.xml)

  1. แก้ไขสไตล์ของคุณบน CSS

การใช้งานsafe-area-inset-left, safe-area-inset-right, safe-area-inset-topหรือsafe-area-inset-bottom

ตัวอย่าง: (ใช้ในกรณีของคุณ!)

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);
  
   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

โบนัส:คุณสามารถเพิ่มคลาสร่างกายเช่นis-androidหรือis-iosบนอุปกรณ์

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

คุณสามารถทำสิ่งนี้ใน CSS ได้

.is-ios #header {
 // Properties
}
— l2aelba
แหล่งที่มา
5

ในกรณีของฉันที่หน้าจอเริ่มต้นแต่ละหน้าได้รับการออกแบบแยกกันแทนที่จะสร้างขึ้นโดยอัตโนมัติหรือจัดวางในรูปแบบกระดานเรื่องราวฉันต้องยึดติดกับการกำหนดค่าหน้าจอ Legacy Launch และเพิ่มภาพแนวตั้งและแนวนอนเพื่อกำหนดเป้าหมายการวางแนว iPhoneX 1125 × 2436 ไปยัง config.xml ดังนี้:

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

หลังจากเพิ่มสิ่งเหล่านี้ใน config.xml แล้ว ("viewport-fit = cover" ถูกตั้งค่าใน index.hml แล้ว) แอปของฉันที่สร้างด้วย Ionic Pro จะเต็มหน้าจอทั้งหมดบนอุปกรณ์ iPhoneX

— TaeKwonJoe
แหล่งที่มา
ครับ แต่ใน config.xml ของฉันฉันได้เพิ่มไว้แล้วเหนือบรรทัดนี้และ viewport-fit = cover
— Kapil soni
@Kapilsoni อาจมีปัญหากับปลั๊กอิน Cordova UIWebView, WKWebView, SplashScreen หรือการกำหนดค่าเหล่านี้ร่วมกัน นอกจากนี้คุณกำหนดเป้าหมาย XCode 10 หรือ 11 ในงานสร้างของคุณหรือไม่
— TaeKwonJoe
ครับผมกำหนดเป้าหมาย XCode 10?
— Kapil soni
2

แก้ไขปัญหาการหมุนหน้าจอ iPhone X / XS

ใน iPhone X / XS การหมุนหน้าจอจะทำให้ความสูงของแถบส่วนหัวใช้ค่าที่ไม่ถูกต้องเนื่องจากการคำนวณพื้นที่ปลอดภัยที่อยู่ภายในไม่ได้สะท้อนค่าใหม่ในเวลารีเฟรช UI ข้อบกพร่องนี้มีอยู่ใน UIWebView แม้ใน iOS 12 ล่าสุดวิธีแก้ปัญหาคือการแทรกขอบด้านบน 1px จากนั้นย้อนกลับอย่างรวดเร็วซึ่งจะทำให้พื้นที่ปลอดภัย -Inet- * คำนวณใหม่ทันที การแก้ไขที่ค่อนข้างน่าเกลียด แต่ใช้ได้ผลถ้าคุณต้องอยู่กับ UIWebView ด้วยเหตุผลใดเหตุผลหนึ่ง

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);
ขยายข้อมูลโค้ด

จุดประสงค์ของรหัสคือทำให้ document.body.style.marginTop เปลี่ยนไปเล็กน้อยแล้วย้อนกลับ ไม่จำเป็นต้องเป็น "1px" คุณสามารถเลือกค่าที่ไม่ทำให้ UI ของคุณสั่นไหว แต่บรรลุวัตถุประสงค์

— YYL
แหล่งที่มา
UIWebView ถูกยกเลิกใน iOS8 ... ฉันสงสัยว่าจะมีการแก้ไขข้อบกพร่องใด ๆ หรือไม่ Apple เตือนเมื่ออัปโหลดแอพว่าจะหยุดใช้งานเร็ว ๆ นี้ ... ถึงเวลาต้องเจ็บปวดและย้ายไปที่ WKWebView ...
— Mozfet
2

ฉันกำลังพัฒนาแอพ Cordova เป็นเวลา 2 ปีและฉันใช้เวลาหลายสัปดาห์ในการแก้ปัญหาที่เกี่ยวข้อง (เช่น: webview เลื่อนเมื่อเปิดคีย์บอร์ด) นี่คือโซลูชันที่ผ่านการทดสอบและพิสูจน์แล้วสำหรับทั้ง iOS และ Android

PS: ฉันใช้ iScroll เพื่อเลื่อนเนื้อหา

  1. อย่าใช้viewport-fit = coverที่เมตาแท็กของ index.html ปล่อยให้แอปไม่อยู่ในแถบสถานะ iOS จะจัดการพื้นที่ที่เหมาะสมสำหรับ iPhone ทุกรุ่น
  2. ใน XCode ให้ยกเลิกการเลือกซ่อนแถบสถานะและต้องใช้แบบเต็มหน้าจอและอย่าลืมเลือก Launch Screen File เป็นCDVLaunchScreen
  3. ใน config.xml ตั้งค่าเต็มหน้าจอเป็นเท็จ
  4. สุดท้าย (ขอบคุณ Eddy Verbruggen สำหรับปลั๊กอินที่ยอดเยี่ยม) เพิ่มปลั๊กอิน Cordova-plugin-webviewcolorเพื่อตั้งค่าแถบสถานะและสีพื้นหลังของพื้นที่ด้านล่าง ปลั๊กอินนี้จะช่วยให้คุณสามารถกำหนดสีที่คุณต้องการได้

  5. เพิ่มด้านล่างใน config.xml (ff ตัวแรกหลัง x คือความทึบ)

    <preference name="BackgroundColor" value="0xff088c90" />

  6. จัดการตำแหน่งการเลื่อนของคุณด้วยตัวคุณเองโดยเพิ่มเหตุการณ์โฟกัสให้กับองค์ประกอบอินพุต

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

สำหรับหุ่นยนต์, ทำเช่นเดียวกัน แต่แทนที่จะCordova-ปลั๊กอิน webviewcolorติดตั้งcordova-plugin-สถานะและCordova-plugin-navigationbar สี

นี่คือรหัสจาวาสคริปต์ที่ใช้ปลั๊กอินเหล่านี้เพื่อทำงานบน iOS และ Android:

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}
— gdarcan
แหล่งที่มา
1

หากคุณติดตั้งเวอร์ชันที่ใหม่กว่าionicทั่วโลกคุณสามารถเรียกใช้ ionic cordova resourcesและจะสร้างภาพหน้าจอเริ่มต้นทั้งหมดให้คุณพร้อมกับขนาดที่ถูกต้อง

— nebulr
แหล่งที่มา
-1

โปรดทราบว่าบทความนี้: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcdมีขนาดแตกต่างจากด้านบนและ Cordova หน้าปลั๊กอิน:

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

ฉันปรับขนาดภาพตามด้านบนและอัปเดตiosแพลตฟอร์มและcordova-plugin-splashscreenเป็นรุ่นล่าสุดและแฟลชเป็นหน้าจอสีขาวหลังจากแก้ไขปัญหาที่สองแล้ว อย่างไรก็ตามภาพสปาชเริ่มต้นจะมีขอบสีขาวที่ด้านล่าง

— msmfsd
แหล่งที่มา
1
ฉันยืนยันได้ว่า iPhone X ในเครื่องจำลองเปิดตัวพร้อมDefault@3x~iphone~comany.png - 1242x2436รูปภาพ
— msmfsd
หมายเหตุขนาดที่เหมาะสมสำหรับ iPhone X มีดังนี้ ... แนวตั้ง: 1125px × 2436px ... แนวนอน: 2436px × 1125px
— Sterling Bourne
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.