ios - কর্ডোভা অ্যাপ্লিকেশন আইফোন এক্স(সিমুলেটর) এ সঠিকভাবে প্রদর্শিত হচ্ছে না




cordova phonegap (6)

আমি গতকাল আমার কর্ডোভা ভিত্তিক অ্যাপটি Xcode 9.0 (9A235) এর আইফোন এক্স সিমুলেটারে পরীক্ষা করেছি এবং এটি দেখতে ভাল লাগেনি। প্রথমত, পূর্ণ স্ক্রীন অঞ্চলটি পূরণ করার পরিবর্তে অ্যাপের সামগ্রীর উপরে এবং নীচে একটি কালো অঞ্চল ছিল। আরও খারাপ, অ্যাপের সামগ্রী এবং কালোটির মধ্যে ছিল দুটি সাদা বার।

কর্ডোভা cordova-plugin-wkwebview-engine যাতে কর্ডোভা ডাব্লুকেউব ভিউ (ইউআইউইউবভিউ নয়) ব্যবহার করে সাদা বারগুলি ঠিক করে। কর্ডোভা cordova-plugin-wkwebview-engine ব্যবহার করার সময় পারফরম্যান্স এবং মেমরি ফাঁস সমস্যার কারণে আমার অ্যাপ্লিকেশনটি ইউআইউইভভিউ থেকে ডব্লিউকেউইউভিউতে স্থানান্তরিত হয় না যা এনএইচএমএল ক্যানভাসে ইনপ্যাপ কিনে হোস্ট করা সামগ্রীগুলি সরাসরি ডাউনলোড করার সময় ঘটে থাকে (সরাসরি file:// দ্বারা অ্যাক্সেস করে) ডাব্লুকেউভিউ ভিউতে সুরক্ষা বিধিনিষেধের কারণে ওয়েবভিউ সম্ভব নয় সুতরাং চিত্রের ডেটা কর্ডোভা cordova-plugin-file মাধ্যমে লোড করা আবশ্যক)।

এই স্ক্রিনশটগুলি <body > এ নীল পটভূমি সেট সহ একটি পরীক্ষা অ্যাপ দেখায়। ইউআইওউবভিউর উপরে এবং নীচে, আপনি সাদা বারগুলি দেখতে পাচ্ছেন, তবে ডব্লিউকেউব ভিউয়ের সাথে নয়:

কর্ডোভা ওয়েবভিউ উভয়ই কোনও দেশীয় অ্যাপ্লিকেশনের সাথে তুলনা করলে কালো অঞ্চলগুলি প্রদর্শন করে যা পুরো স্ক্রিনের ক্ষেত্রটি পূর্ণ করে:


3 টি পদক্ষেপ আপনাকে করতে হবে

আইওএস 11 স্ট্যাটাস বার এবং আইফোন এক্স শিরোনাম সমস্যাগুলির জন্য

1. ভিউপোর্ট ফিট কভার

<header> আপনার ভিউপোর্টের viewport-fit=cover করুন

<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. <platform name="ios"> config.xml <platform name="ios"> ভিতরে আপনার config.xml আরও স্প্ল্যাশ চিত্র যুক্ত <platform name="ios">

এই পদক্ষেপটি এড়িয়ে যাবেন না, আইফোন এক্স কাজের জন্য পর্দা ফিট করার জন্য এটি প্রয়োজনীয়

<splash src="your_path/[email protected]~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/[email protected]~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/[email protected]~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/[email protected]~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 1242x2208 -->

ডেমো: https://jsfiddle.net/mmy885q4 (config.xML)

  1. সিএসএসে আপনার স্টাইলটি ঠিক করুন

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});
}

বোনাস: আপনি deviceready মতো বডি ক্লাস যোগ করতে পারেন is-android বা deviceready is-ios deviceready

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

সুতরাং আপনি সিএসএসে এর মতো কিছু করতে পারেন

.is-ios #header {
 // Properties
}

আমার ক্ষেত্রে যেখানে প্রতিটি স্প্ল্যাশ পর্দা স্বতন্ত্রভাবে পরিবর্তিত বা স্টোরি বোর্ড ফর্ম্যাটের পরিবর্তে পৃথকভাবে ডিজাইন করা হয়েছিল সেখানে আমাকে আমার লিগ্যাসি লঞ্চ স্ক্রিন কনফিগারেশনটি আটকে থাকতে হয়েছিল এবং আইফোনএক্স 1125 × 2436 ওরিয়েন্টেশনগুলিকে কনফিগারেশন এক্সএক্সএল লক্ষ্যবস্তু করতে প্রতিকৃতি এবং ল্যান্ডস্কেপ চিত্র যুক্ত করতে হয়েছিল had তাই ভালো:

<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" />

এগুলি কনফিগারেশন.এক্সএমএল যুক্ত করার পরে ("ভিউপোর্ট-ফিট = কভার" ইতিমধ্যে সূচিপত্রের শিরোনামে সেট করা ছিল) আয়নিক প্রো দিয়ে নির্মিত আমার অ্যাপ্লিকেশনটি আইফোনএক্স ডিভাইসে পুরো পর্দা পূরণ করে।


কেবলমাত্র একটি নোট যে নিরাপদ-অঞ্চল মার্জিনের জন্য constant কীওয়ার্ড ব্যবহারটি 11.2 বিটা + এর জন্য env আপডেট করা হয়েছে

https://webkit.org/blog/7929/designing-websites-for-iphone-x/


দয়া করে নোট করুন: এই নিবন্ধটি: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd এর উপরে এবং কর্ডোভা থেকে আলাদা আকার রয়েছে প্লাগইন পৃষ্ঠা:

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

আমি চিত্রগুলি উপরের মতো আকার পরিবর্তন করেছি এবং ios প্ল্যাটফর্ম এবং cordova-plugin-splashscreen সর্বশেষে এবং ফ্ল্যাশ টু হোয়াইট স্ক্রিনের পরে দ্বিতীয় ইস্যুটি ঠিক করা হয়েছে। তবে প্রাথমিক স্পাশ চিত্রটির নীচে এখন একটি সাদা সীমানা রয়েছে।


একটি বিদ্যমান কর্ডোভা প্রকল্পের ম্যানুয়াল ফিক্সের জন্য

কালো বার

এটি আপনার তথ্য.প্লেস্ট ফাইলটিতে যুক্ত করুন। লঞ্চ চিত্রটি স্থির করা একটি পৃথক ইস্যু অর্থাৎ আইফোনএক্স লঞ্চ চিত্রটি কীভাবে যুক্ত করা যায়

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

সাদা বার

মেটা ট্যাগে ভিউপোর্ট-ফিট = কভার সেট করুন

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

আইফোন এক্স / এক্সএস স্ক্রিন রোটেশন ইস্যুটির জন্য ঠিক করুন

আইফোন এক্স / এক্সএসে, একটি স্ক্রিন ঘোরার ফলে শিরোনাম বারের উচ্চতা একটি ভুল মান ব্যবহার করবে, কারণ নিরাপদ-অঞ্চল-ইনসেট- * এর গণনা UI রিফ্রেশের জন্য সময়টিতে নতুন মানগুলি প্রতিফলিত করে না। এই বাগটি ইউআইউইউবভিউতে সর্বশেষতম আইওএস 12 তেও বিদ্যমান রয়েছে A একটি ওয়ার্কআরউন্ডটি 1px শীর্ষের মার্জিনটি সন্নিবেশ করছে এবং তারপরে দ্রুত এটিকে বিপরীত করবে, যা নিরাপদ-অঞ্চল-ইনসেট- *কে তাত্ক্ষণিকভাবে পুনরায় গণনা করার জন্য ট্রিগার করবে। কিছুটা কুৎসিত ফিক্স তবে এটি কার্যকর হয় যদি আপনাকে এক কারণে বা অন্য কোনও কারণে ইউআইবিউব ভিউয়ের সাথে থাকতে হয়।

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

কোডটির উদ্দেশ্য হ'ল ডকুমেন্ট.ডি.স্টাইল.মার্জিনটপকে কিছুটা পরিবর্তিত করা এবং তারপরে এটিকে বিপরীত করা। অগত্যা এটি "1px" হতে হবে না। আপনি এমন একটি মান বাছতে পারেন যা আপনার ইউআইকে ঝাঁকুনির কারণ না করে তবে এর উদ্দেশ্য অর্জন করে।







iphone-x