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

Question

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

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

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

_{(উত্স: pbrd.co )}

_{(উত্স: pbrd.co )}

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

Comments

Wkwebview সঙ্গে আকর্ষণীয়। আমার গেমটিতে আমার পুরো প্রস্থ ছিল না, তবে কেন্দ্র থেকে অফসেট ছিল। ইউইউবিউভিউতে এটি একই আকার রাখে, তবে কমপক্ষে নিজেকে কেন্দ্র করে।

— অজমক্লাড

আমার এই সমস্যাটিও ছিল তাই আমি স্রেফ সিএসএস দিয়ে কিছুটা আলাদা করে ফেললাম pt.stackoverflow.com/a/263460/55076

— ইগোর

আমারও এই সমস্যা হচ্ছে। <meta>নীচে তালিকাভুক্ত অন্যরা কাজ করছে না বলে কেবল আমার কর্ডোভা সূচিপত্র HTML ফাইলটিতে ট্যাগ যুক্ত করা। আমি কর্ডোভা 7x কর্ডোভা-আইওএস 4.5.4 দিয়ে চালাচ্ছি - আমার আরও কিছু করার দরকার আছে?

— রোলিংগার

Answer 1

আমি এখানে সাদা বারগুলির সমাধান পেয়েছি :

viewport-fit=coverভিউপোর্ট <meta>ট্যাগ সেট করুন , যেমন:

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

ইউআইবিউবভিউয়ের সাদা বারগুলি তখন অদৃশ্য হয়ে যায়:

কালো অঞ্চলগুলি সরানোর সমাধান ( নীচে একটি মন্তব্যে @dpogue দ্বারা সরবরাহিত ) হ'ল লঞ্চস্টিরিবোর্ড চিত্রগুলিcordova-plugin-splashscreen পূর্বনির্ধারিতভাবে কর্ডোভা দ্বারা ব্যবহৃত লিগ্যাসি লঞ্চ চিত্রগুলি প্রতিস্থাপনের সাথে ব্যবহার করা। এটি করতে, আইওএস প্ল্যাটফর্মটিতে নিম্নলিখিতগুলি যুক্ত করুন 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

একবার কালো বারগুলি মুছে ফেলা হলে, আইফোন এক্সকে সম্বোধন করার জন্য আলাদা আলাদা জিনিস রয়েছে: "খাঁজ" এর কারণে স্ট্যাটাস বারটি 20px এর চেয়ে বড়, যার অর্থ আপনার কর্ডোভা অ্যাপ্লিকেশনটির একেবারে শীর্ষে থাকা কোনও বিষয়বস্তু এতে অস্পষ্ট হয়ে যাবে :

পিক্সেলগুলিতে কোনও প্যাডিংকে হার্ড-কোডিংয়ের পরিবর্তে safe-area-inset-*আপনি iOS 11 এ নতুন কনস্ট্যান্ট ব্যবহার করে সিএসএসে স্বয়ংক্রিয়ভাবে এটি পরিচালনা করতে পারেন ।

দ্রষ্টব্য: আইওএস ১১.০-এ এই ধ্রুবকগুলি পরিচালনা করার জন্য ফাংশন বলা হয়েছিল constant()কিন্তু আইওএস ১১.২ এ অ্যাপল এটির পুনর্নবীকরণ করেছে env()( এখানে দেখুন ), সুতরাং উভয় ক্ষেত্রেই আপনাকে সিএসএস নিয়মকে ওভারলোড করতে হবে এবং প্রয়োগ করার জন্য সিএসএস ফলব্যাক প্রক্রিয়াতে নির্ভর করতে হবে উপযুক্ত এক:

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

ফলাফলটি তখন পছন্দসই অনুসারে হয়: অ্যাপের সামগ্রীটি পুরো স্ক্রিনটি কভার করে তবে "খাঁজ" দ্বারা অস্পষ্ট নয়:

আমি একটি কর্ডোভা পরীক্ষা প্রকল্প তৈরি করেছি যা উপরের পদক্ষেপগুলিকে চিত্রিত করে: ওয়েবভিউ-টুস্ট.জিপ

মন্তব্য:

পাদলেখ বোতাম

• যদি আপনার অ্যাপ্লিকেশনটিতে পাদলেখ বোতাম থাকে (যেমন আমার হয়) তবে আপনাকে safe-area-inset-bottomআইফোন এক্স-এ ভার্চুয়াল হোম বোতাম দ্বারা আচ্ছাদিত না হয়ে এড়াতে আপনাকে আবেদন করতে হবে।
• আমার ক্ষেত্রে, আমি এটি প্রয়োগ করতে পারিনি <body>কারণ পাদলেখ একেবারে অবস্থানযুক্ত, তাই আমার এটি সরাসরি পাদলেখ করার প্রয়োজন ছিল:

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

Cordova-প্লাগইন-স্ট্যাটাস-

• স্ট্যাটাস বারের আকারটি আইফোন এক্স-এ পরিবর্তিত হয়েছে, সুতরাং আইফোন এক্স-তে পুরানো সংস্করণগুলি cordova-plugin-statusbarভুলভাবে প্রদর্শন করা হয়েছে
• মাইক হার্টিংটন এই পুল অনুরোধটি তৈরি করেছেন যা প্রয়োজনীয় পরিবর্তনগুলি প্রয়োগ করে।
• এটি cordova-plugin-statusbar@2.3.0রিলিজের মধ্যে একীভূত হয়েছিল , তাই নিরাপদ-অঞ্চল-ইনসেটগুলিতে প্রয়োগ করার জন্য আপনি কমপক্ষে এই সংস্করণটি ব্যবহার করছেন তা নিশ্চিত করুন

জমকালো পর্দা

• লঞ্চস্ক্রিন স্টোরিবোর্ডের সীমাবদ্ধতাগুলি আইওএস 11 / আইফোন এক্স-তে পরিবর্তিত হয়েছে, যার অর্থ স্প্ল্যাশস্ক্রিন প্লাগইনের বিদ্যমান সংস্করণগুলি ব্যবহার করার সময় লঞ্চের সময় "লাফিয়ে" উপস্থিত হয়েছিল ( এখানে দেখুন )।
• এটি বাগ রিপোর্ট সিবি -13505- এ ধরা পড়েছিল , স্থির পিআর কর্ডোভা-আইওএস # 354 এবং এতে মুক্তি পেয়েছে cordova-ios@4.5.4, সুতরাং নিশ্চিত হয়ে নিন যে আপনি cordova-iosপ্ল্যাটফর্মের সাম্প্রতিক সংস্করণটি ব্যবহার করছেন ।

ডিভাইস ওরিয়েন্টেশন

• আইওএস ১১.০-তে ইউআইবিউবভিউ ব্যবহার করার সময়, প্রতিকৃতি> ল্যান্ডস্কেপ> প্রতিকৃতি থেকে ঘোরার ফলে safe-area-insetপুনরায় প্রয়োগ না করা হয়, ফলে সামগ্রীটি আবার খাঁজ দ্বারা অস্পষ্ট হয়ে যায় ( নীচে একটি মন্তব্যে জেএমএস দ্বারা হাইলাইট করা হয়েছে )।
• অ্যাপ্লিকেশনটি ল্যান্ডস্কেপে চালু করা হলে প্রতিকৃতিতে ঘোরানো হয়
• WKWebView এর মাধ্যমে ব্যবহার করার সময় এটি ঘটে না cordova-plugin-wkwebview-engine।
• রাডার প্রতিবেদন: http://www.openradar.me/radar?id=5035192880201728
• আপডেট : এটি iOS 11.1 এ স্থির করা হয়েছে বলে মনে হয়

রেফারেন্সের জন্য, এটি মূল কর্ডোভা ইস্যু যা আমি খোললাম এটি এটি গ্রহণ করে: https://issues.apache.org/jira/browse/CB-13273

Comments

আপনি যখন স্ক্রিনটি ঘোরেন তখন আপনার কোনও সমস্যা আছে? আমি চেষ্টা করে এসেছি, তবে পর্দার ঘোরার পরে, সমস্ত কিছু ভাঙা হয়েছে (সেফ-এরিয়া-ইনসেট- * ডিভাইস অরিয়েন্টেশন অনুসারে তাদের মানগুলি আপডেট করে না; এবং প্রতিকৃতি পোর্ট্রেট -> ল্যান্ডস্কেপ -> আবার প্রতিকৃতি পরে, প্রাথমিক মানগুলিও ভেঙে যায় )। এটি অ্যাপল / সাফারি ব্রাউজারে কোনও সমস্যা হতে পারে?

— জুয়ান মিগুয়েল এস।

আমার ক্ষেত্রে, আমি যখন viewport-fit=coverআমার পুরো অ্যাপটি যুক্ত করি তখন একটি ফাঁকা সাদা পর্দা প্রদর্শন করা হয় এবং অন্য কিছুই নয় nothing আমি আইফোন 7 প্লাসে আইওএস 11, এক্সকোড 9 ব্যবহার করছি। কেউ একইরকম আচরণ অনুভব করছেন?

— দিমিত্রি

@ ডেভএলডেন - দেখে মনে হচ্ছে যে 11.2 বিটাতে তারা কী- ওয়ার্ডেরconstant জন্য বাদ পড়েছে env- এছাড়াও দেখুন: webkit.org/blog/7929/designing-websites-for- iPhone

— ব্রেন্ট

আপনি আপনার অ্যাপে বডি সিএসএস কোডটি কোথায় রাখবেন? কোন ফাইলের মতো? আমার জন্য কিছুই কাজ করে না, আমি আয়নিক 3 ব্যবহার করছি

— দিমিত্রি

ঘূর্ণন সমস্যা সম্পর্কিত কোনও আপডেট আছে? আমি আইওএস 12 এ আছি এবং একই সমস্যাটি অনুভব করছি। আমার কাছে অদ্ভুত লাগছে যে এই সমস্যাটি অব্যাহত রয়েছে। / সিসি @jms

— এ - মি

Answer 2

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

কালো বারগুলি

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

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

সাদা বার

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

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

Comments

ধন্যবাদ! .Plist পরিবর্তনটি নির্বাচিত উত্তর থেকে পরিবর্তিত হিসাবে একই প্রভাব ফেলতে পারে তবে WAY দ্রুত।

— 2Fwebd

এই প্রতিটি কাজ সিএসএস পিক্সেল উচ্চতা এবং প্রস্থে কি করে? আমার অ্যাপ্লিকেশনটির শীর্ষে (মেনুগুলি ইত্যাদি) সিরিজ ডিভাইসের একটি সিরিজ রয়েছে ... এবং তারপরে আমি বাকি পিক্সেল উচ্চতাটি গণনা করি যাতে শেষ ডিআইভিটি স্ক্রিনের বাকি অংশটি পূরণ করতে পারে। এখনই আমি দেখতে পাচ্ছি যে নীচের সাদা বারটি D ডিআইভির কিছুটি কভার করে, তবে আমি এগুলি সবও বলতে পারি না - ডিআইভি বোঝানো এখনও পর্দার নীচে যাচ্ছে না। এবং পরিবর্তে, আমার অ্যাপ্লিকেশন উপরের সাদা বারের নীচে শুরু হয় যাতে এটি এমনকি উপরের স্থানটি ব্যবহার করার চেষ্টা না করে।

— রোলিংগার

আমি ব্যবহার করেছি UILaunchStoryboardNameএবং এটি কালো বারগুলি মুছে ফেলতে সক্ষম হয়েছিল। তবে আমার স্প্ল্যাশ পর্দা প্রসারিত হয়। কোন কারণে কেন? গৃহীত উত্তরটি আমার পক্ষে কাজ করছে না

— হুটিং

@ কোডার ধন্যবাদ - তবে ইউআইএলআঞ্চস্টিরিবোর্ডের নামটি প্লিস্টে যুক্ত করা আমাকে অ্যাপ স্টোরে জমা দিতে সক্ষম হতে বাধা দেয়: ত্রুটি আইটিএমএস -90705: "স্টোরিবোর্ডটি পাওয়া যায় নি sure ইউআইএলআঞ্চসিটিবোর্ডের নামটির জন্য কোনও ফাইলের নাম এক্সটেনশন ছাড়াই আপনি লঞ্চ স্টোরিবোর্ড ফাইলের নামটি নির্দিষ্ট করেছেন তা নিশ্চিত করুন Make ইনফো.প্লিস্টে। "

— ম্যাট রবার্টস

@ হুইটিং আপনি কি আপনার মামলা সম্পর্কে কোন সমাধান খুঁজে পেয়েছেন?

— এলমেকার

Answer 3

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

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

---

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)

---

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

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

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

---

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

ব্যবহারের 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উপর deviceready

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

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

.is-ios #header {
 // Properties
}

Answer 4

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

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

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

Comments

স্যার তবে আমার কনফিগারেশন.এক্সএমএল এ আমি ইতিমধ্যে এই লাইন এবং ভিউপোর্ট-ফিট = কভারের উপরে যুক্ত করেছি

— কপিল সোনি

@ ক্যাপিলসনি তখন কর্ডোভা ইউআইউইউবভিউ, ডাব্লুকেউব ভিউ, স্প্ল্যাশস্ক্রিন প্লাগইন বা এই কনফিগারেশনের সংমিশ্রণের সাথে সমস্যা হতে পারে। এছাড়াও, আপনি কি আপনার বিল্ডগুলিতে এক্সকোড 10 বা 11 কে লক্ষ্য করছেন?

— তাইকওনজয়ে

স্যার আমি এক্সকোড 10 টার্গেট করছি?

— কপিল সোনি

Answer 5

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

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

Answer 6

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

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

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" হতে হবে না। আপনি এমন একটি মান বাছাই করতে পারেন যা আপনার ইউআইকে ঝাঁকুনির কারণ না করে তবে এর উদ্দেশ্য অর্জন করে।

Comments

ইউআইবিউবভিউ আইওএস 8-এ চিত্রিত করা হয়েছিল ... বিদ্যমান যে কোনও বাগটি ঠিক করা হবে কিনা তা নিয়ে আমার সন্দেহ। অ্যাপল আপলোড করার সময় অ্যাপল সতর্ক করছে যে এটি শীঘ্রই বন্ধ হয়ে যাবে ... এভাবে ব্যথা নেওয়ার এবং ডাব্লুউইউভিউ ভিউতে মাইগ্রেট করার সময় ...

— মোজফেট

Answer 7

আমি 2 বছর ধরে কর্ডোভা অ্যাপ্লিকেশন বিকাশ করছি এবং সম্পর্কিত সমস্যাগুলি সমাধানের জন্য আমি সপ্তাহগুলি ব্যয় করেছি (উদাহরণস্বরূপ: কীবোর্ড খোলার সময় ওয়েবভিউ স্ক্রোল)। আইওএস এবং অ্যান্ড্রয়েড উভয়ের জন্য এখানে একটি পরীক্ষিত এবং প্রমাণিত সমাধান

PS: আমি লিখিত সামগ্রী স্ক্রোল করার জন্য আইস্ক্রোল ব্যবহার করছি

1. সূচক html এর মেটা ট্যাগে কখনও ভিউপোর্ট-ফিট = কভার ব্যবহার করবেন না, অ্যাপটিকে স্ট্যাটাসবারের বাইরে রাখুন। আইওএস সমস্ত আইফোনের রূপগুলির জন্য উপযুক্ত অঞ্চল পরিচালনা করবে।
2. উপর XCode আনচেক ইন লুকান স্ট্যাটাস বার এবং পূর্ণ পর্দায় প্রয়োজন এবং ভুলবেন না যেমন লঞ্চ স্ক্রিন ফাইল নির্বাচন করতে CDVLaunchScreen
3. কনফিগ.এক্সএমএল হিসাবে পূর্ণ স্ক্রীন সেট করুন মিথ্যা
4. শেষ অবধি , (দুর্দান্ত প্লাগইনগুলির জন্য এডি ভারব্রুজেনকে ধন্যবাদ) তার প্লাগইন কর্ডোভা-প্লাগইন-ওয়েবভিউ রঙে যুক্ত করুন স্ট্যাটাসবার এবং নীচের ব্যাকগ্রাউন্ড কালার সেট করতে কালার যুক্ত করুন। এই প্লাগইনটি আপনার পছন্দমতো কোনও রঙ সেট করার অনুমতি দেবে।

5. কনফিগ.এক্সএমএলে নীচে যুক্ত করুন (এক্স এফসিটির পরে প্রথম এফএফ)

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

6. ইনপুট উপাদানগুলিতে ফোকাস ইভেন্টগুলি যুক্ত করে নিজের স্ক্রোলের অবস্থানটি নিজেকে হ্যান্ডেল করুন

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

অ্যান্ড্রয়েডের জন্য, একই করুন তবে কর্ডোভা-প্লাগইন-ওয়েবভিউ রঙের পরিবর্তে কর্ডোভা -প্লাগইন-স্ট্যাটাসবার এবং কর্ডোভা-প্লাগ-ইন -নেভিগেশনবার-রঙ ইনস্টল করুন

আইওএস এবং অ্যান্ড্রয়েড উভয় ক্ষেত্রেই এই প্লাগইনগুলি ব্যবহার করে একটি জাভাস্ক্রিপ্ট কোড দেওয়া হয়েছে:

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

Answer 8

আপনি যদি ionicবিশ্বব্যাপী নতুন সংস্করণ ইনস্টল করেন আপনি চালাতে পারেন ionic cordova resourcesএবং এটি আপনার জন্য সঠিক আকারের পাশাপাশি স্প্ল্যাশস্ক্রিনের সমস্ত চিত্র তৈরি করবে।

Answer 9

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

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সর্বশেষে এবং ফ্ল্যাশ থেকে হোয়াইট স্ক্রিনে দ্বিতীয় ইস্যুটি স্থির হওয়ার পরে। তবে প্রাথমিক স্পাশ চিত্রটির নীচে এখন একটি সাদা সীমানা রয়েছে।

Comments

আমি Default@3x~iphone~comany.png - 1242x2436ইমেজ সহ সিমুলেটর লঞ্চগুলিতে আইফোন এক্সটি নিশ্চিত করতে পারি

— এমএসএমএফএসডি

দ্রষ্টব্য, আইফোন এক্স এর যথাযথ মাত্রাগুলি নীচে রয়েছে ... প্রতিকৃতি: 1125px × 2436px ... ল্যান্ডস্কেপ: 2436px × 1125px

— স্টার্লিং বোর্ন