Ionic-framework: يتداخل شريط حالة iOS 11 مع الرأس

تم إنشاؤها على ٣١ أكتوبر ٢٠١٧  ·  76تعليقات  ·  مصدر: ionic-team/ionic-framework

الإصدار الأيوني: (حدد واحدًا بعلامة "X")
(بالنسبة إلى مشكلات Ionic 1.x ، يرجى استخدام https://github.com/ionic-team/ionic-v1)
[] 2.x
[x] 3.x
[] 4.x

أقوم بإرسال ... (حدد واحدًا بعلامة "x")
[x] تقرير الشوائب
[ ] طلب المواصفات

السلوك الحالي:
يتداخل شريط الحالة مع الرأس على iPhone SE مع iOS 11.
image

سلوك متوقع:
يجب أن يحتوي العنوان على المساحة المتروكة العلوية الصحيحة حتى لا يتداخل النص.

خطوات التكاثر:

  • أنشئ تطبيقًا جديدًا بـ ionic start myApp tabs
  • قم بالبناء باستخدام Ionic Pro واختبر باستخدام Ionic View

المعلومات الأيونية: (قم بتشغيل ionic info من موجه الأوامر الطرفية / cmd والصق الإخراج أدناه):

cli packages: (C:\Users\marco\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.8.0

System:

    Node : v6.10.0
    npm  : 3.10.10
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

التعليق الأكثر فائدة

تأكد من وجود viewport-fit=cover في تطبيقك.

المنطقة الآمنة الداخلية هي 0 على أجهزة iOS11 غير iPhone X.

ليس صحيحًا حقًا. عند تقديم السمة المناسبة لإطار العرض ، ستجعل إطار العرض يشغل مساحة الشاشة بأكملها. بمجرد القيام بذلك ، تبدأ المناطق الآمنة وتوفر القيمة الصحيحة.

عرض هنا
viewport

وقواعد المغلق المطبقة

screen shot 2017-11-01 at 7 57 45 am

نظرًا لأن نموذج الكود الخاص بك يعرض calc (env (safe-area-inset-top) + 4px) ؛ يمكن أن يتحول ذلك إلى "4px" وربما لا يزال يتم تفسير ذلك من قبل المتصفحات التي لا تدعم env ().
تم تخطي env () ، ولكن لا يزال يتم تفسير الثابت () (الحكم من 13294 (تعليق))

env و constant على أنه ثابت متاح فقط لنظام iOS 11.0 ، ولكن بالنسبة لنظام iOS11.1 ، الذي يتم طرحه ، تغيرت الوظيفة إلى env ، لذلك نحن بحاجة لكليهما الآن.

ال 76 كومينتر

حاولت أيضًا استخدام WkWebView باتباع هذه الإرشادات (https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions) ، لكن هذا لم يحل المشكلة.

حاولت أيضًا استخدام Ionic Package والتثبيت على الجهاز ، ولم ينجح أيضًا.

مرحبا! شكرا لفتح قضية معنا!

لقد جربت خطواتك لإعادة الإنتاج باستثناء البناء محليًا على جهاز Mac الخاص بي بدلاً من استخدام IonicPro وعملت بشكل جيد. لذلك ، قد تكون هذه مشكلة مع Ionic Pro.

فقط لاستبعاد الاختلافات بين ما قمت بإنشائه وما لديك ، هل سيكون من الممكن لك تحميل نموذج التطبيق الخاص بك إلى GitHub حتى أتمكن من إلقاء نظرة؟

شكرا لك على استخدام Ionic

ها هو كود المصدر: teststatusbar.zip (لقد استبعدت المنصات والمكونات الإضافية و www ، هل هذا ما تحتاجه؟)

لا ينبغي أن يكون هذا مهمًا ، ولكن على وجه الدقة استخدمت ionic start myApp sidemenu بدلاً من ionic start myApp tabs

سوف يعمل بشكل جيد. شكرا لك. سأخبرك كيف ستسير اختباراتي.

التعليمات البرمجية الخاصة بك تبدو جيدة. لديه كل ما ينبغي ، وما إلى ذلك.

يبدو البناء محليًا على جهاز Mac والتشغيل باستخدام محاكي SE جيدًا:

screen shot 2017-10-31 at 11 14 22 am

قد تكون هذه مشكلة مع Ionic Pro. اسمحوا لي أن أتحقق من ذلك.

لقد تمكنت من تكرار هذه المشكلة من خلال:

  1. اختبار البدء الأيوني
  2. الارتباط بحساب Ionic Pro عندما يُطلب منك ذلك
  3. بناء محلي على جهاز Mac الخاص بي وتثبيته على هاتفي ، كل ذلك يعمل بشكل رائع
  4. ادفع إلى Ionic Pro ، وانتظر الإنشاء ، واعرض في Ionic View ، واحصل على مشكلة ازدحام شريط الحالة

مخصصة لمشرف العرض لإلقاء نظرة عليها.

أنا أواجه نفس الشيء ، أعتقد أن هذه السطور هي الجاني. https://github.com/ionic-team/ionic/blob/33960f1a5a98fc49525cfccc85f0847bf3a02de5/src/platform/cordova.scss#L48 -L50

التصحيح في رحلات السفاري ورأيت هذا.
image

image

tcigrand لست متأكدًا من المكان الذي ترى فيه ذلك ، ولكن هل تستخدم البرامج النصية للتطبيق 3.0.0؟ تم إصلاح خطأ ماكر في 3.0.1 حيث كانت الإصدارات --prod تجرد بعض CSS: Bug Fixes .

كنت في 2.1.4 ، ولكن لا يبدو أن التحديث إلى 3.0.1 يصلح ذلك.

لقد رأيت ذلك في أدوات safari dev عند تصحيح أخطاء تطبيق يعمل على iPhone 8 Plus مع iOS11.

في main.css أحصل على الأسطر التالية.

.ios ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
  padding-top: calc(20px + 4px);
  padding-top: calc(constant(safe-area-inset-top) + 4px);
  padding-top: calc(env(safe-area-inset-top) + 4px);
  min-height: calc(44px + 20px);
  min-height: calc(44px + constant(safe-area-inset-top));
  min-height: calc(44px + env(safe-area-inset-top));
}

كنت أفكر في أن رحلات السفاري ترى عدة خصائص padding-top و min-height ثم تستخدم آخرها. بالنسبة للأجهزة بخلاف أجهزة iPhoneX ، نود استخدام padding-top: calc(20px + 4px); و min-height: calc(44px + 20px); . بالنسبة إلى iPhoneX ، نود استخدام القواعد مع safe-area-inset-top .

tcigrand قد تكون على المسار الصحيح.

https://www.quirksmode.org/blog/archives/2017/10/safeareainset_v.html يقول:

[..] المنطقة الآمنة الداخلية هي 0 على أجهزة iOS11 غير أجهزة iPhone X.

https://webkit.org/blog/7929/designing-websites-for-iphone-x/ يقول:

بالنسبة للمتصفحات التي لا تدعم env () ، سيتم تجاهل قاعدة النمط التي تتضمنها

تفسيران محتملان:

  • نظرًا لأن نموذج الكود الخاص بك يعرض calc(env(safe-area-inset-top) + 4px); ، فقد يتحول ذلك إلى "4px" وربما لا يزال يتم تفسير ذلك بواسطة المتصفحات التي لا تدعم env ().
  • تم تخطي env () ، ولكن لا يزال يتم تفسير الثابت () (انطلاقًا من https://github.com/ionic-team/ionic/issues/13294#issuecomment-340918487)

لا أقوم بالتطوير على نظام Mac ولا يمكنني التحقق من ذلك الآن.

-

ثم مرة أخرى ، قد تظل مشكلة مع Ionic Package ، نظرًا لأن https://github.com/ionic-team/ionic/issues/13294#issuecomment -340812401 لم يكن لديه مشكلة في بنية محلية.

تمكنت من الوصول إلى جهاز Mac وأكدت ما وجدتهtcigrand من خلال المفتش.

على iPhone 5 مع iOS 10 ، يبدو كما يلي:
image

على iPhone SE مع iOS 11 ، يبدو كما يلي:
image

كما ترى ، يستخدم iPhone SE مع نظام التشغيل iOS 11 القاعدة بالثابت () حيث يكون للمنطقة الآمنة أعلى قيمة 0.

من المحتمل أن يتم إصلاح هذا في العديد من أوراق الأنماط الأيونية ، حيث تم إرجاع 9 نتائج في المصدر الأيوني مقابل constant(safe-area-inset-top) .

أضع علامة على mhartington لإدخال أسطر css :)

إليك حل قبيح في الوقت الحالي: https://gist.github.com/marcovtwout/145438116e17d20415a377d92db6ccab

تأكد من وجود viewport-fit=cover في تطبيقك.

المنطقة الآمنة الداخلية هي 0 على أجهزة iOS11 غير iPhone X.

ليس صحيحًا حقًا. عند تقديم السمة المناسبة لإطار العرض ، ستجعل إطار العرض يشغل مساحة الشاشة بأكملها. بمجرد القيام بذلك ، تبدأ المناطق الآمنة وتوفر القيمة الصحيحة.

عرض هنا
viewport

وقواعد المغلق المطبقة

screen shot 2017-11-01 at 7 57 45 am

نظرًا لأن نموذج الكود الخاص بك يعرض calc (env (safe-area-inset-top) + 4px) ؛ يمكن أن يتحول ذلك إلى "4px" وربما لا يزال يتم تفسير ذلك من قبل المتصفحات التي لا تدعم env ().
تم تخطي env () ، ولكن لا يزال يتم تفسير الثابت () (الحكم من 13294 (تعليق))

env و constant على أنه ثابت متاح فقط لنظام iOS 11.0 ، ولكن بالنسبة لنظام iOS11.1 ، الذي يتم طرحه ، تغيرت الوظيفة إلى env ، لذلك نحن بحاجة لكليهما الآن.

viewport-fit=cover موجود في العلامة الوصفية لكود المثال المقدم ، لذلك يجب أن يحدث شيء آخر. هل اختبرت نظام التشغيل iOS 11.1 فقط (تم إصداره أمس) أم 11.0.3 أيضًا؟

لقد قمت باختبار كل إصدار من إصدارات iOS 11 التي تم إصدارها وكذلك ios10.

marcovtwout هل يمكنك تقديم git repo الذي يحتوي على نفس المشكلة؟ مع تعليمات مفصلة للغاية؟ كيف يمكنني إعادة إنشائي؟

mhartington تم تقديم كود المصدر الخاص بي هنا https://github.com/ionic-team/ionic/issues/13294#issuecomment -340811372 و @ kensodemann أعاد إنتاجه فقط في العرض الأيوني: https://github.com/ionic-team / ionic / issues / 13294 # issuecomment -340847517

تلخيصًا للتجربة المذكورة أعلاه حتى الآن ، لا يزال من الممكن أن تكون هذه المشكلة موجودة فقط في Ionic View / Ionic Package وليس عند إجراء إنشاء محلي محدث.

كنت أفتقد viewport-fit=cover ، مما أدى إلى إصلاح المشكلة. شكرا للمساعدة! آسف لفوضى هذه القضية.

لقد اختبرت وحصلت على نفس النتيجة مع viewport-fit = cover ... عند التشغيل على الجهاز ، اختفت حشوة شريط الحالة.

لإعادة الإنتاج ، بدأت للتو المشروع الأيوني فارغًا وتشغيله على جهاز محاكاة وجهاز ، لم يتغير شيء.

Xcode 8.3.3 ، جهاز محاكاة يعمل بنظام iOS 10.3 وجهاز يعمل بنظام iOS 11.0.3.
لبناء تستخدم للتو "أيوني كوردوفا بناء دائرة الرقابة الداخلية".

"
حزم cli: (/ usr / local / lib / node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

الحزم العالمية:

cordova (Cordova CLI) : 7.0.1

الحزم المحلية:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.8.0

نظام:

Android SDK Tools : 26.0.2
ios-sim           : 6.0.0 
Node              : v8.1.3
npm               : 5.3.0 
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b

متفرقات:

backend : pro

"

ionic-header

screen shot 2017-11-03 at 13 37 38

LuizTokuhara لا أستطيع تكرار هذا على الإطلاق. هل تقوم بالنشر على الجهاز من خلال Ionic View أو ionic cordova run ios

img_5392

هل يمكنك دفع ذلك إلى جيثب لكي أنظر إليه؟

تضمين التغريدة
لقد بدأت للتو مشروعًا أيونيًا فارغًا ، وقمت بعمل "أيوني كوردوفا بناء ios" ، وافتتح المشروع في Xcode وقمت ببناء Adhoc للاختبار على الجهاز.

حسنًا ، هذا بالضبط ما فعلته لمحاولة التكرار. هل تستطيع الركض

ionic cordova plugin ls

cordova-plugin-device 1.1.4 "Device" cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 4.0.3 "Splashscreen" cordova-plugin-whitelist 1.3.1 "Whitelist" ionic-plugin-keyboard 2.2.1 "Keyboard"

ربما أحتاج إلى ترقية شيء ما؟

بالنسبة لي هذا يعطي:

> cordova plugin ls
cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-health 1.0.2 "Cordova Health"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"

تضمين التغريدة
لقد قمت بتحميل إصدار ios الذي قمت بإنشائه هنا ، ولا أعرف ما إذا كان بإمكانك الاختبار ومعرفة ما إذا كان هناك شيء مختلف عن التصميم الخاص بك.
بناء iOS

لا يزال ، يبدو جيدًا في نهايتي

أوه ، هذا غريب ...
اسمح لي فقط بتثبيت أحدث Xcode ومعرفة ما إذا كان يغير أي شيء.

تضمين التغريدة
حسنًا ، بعد الترقية إلى أحدث Xcode ، تعمل حشوة شريط الحالة بشكل جيد !!!
ربما بعض التوافق مع Xcode 8 لأنه لا يحتوي على أحدث دعم لـ iOS و iPhone X؟

للإضافة إلى ذلك ، أواجه أيضًا ما تم وصفه في https://github.com/ionic-team/ionic/issues/13294#issuecomment -340847517.

إذا قمت بالبناء محليًا ونشرت على جهاز ، فسيكون كل شيء جيدًا.
إذا مررت عبر Ionic View (أو استخدمت خدمة Ionic build للحصول على ملف .ipk) ، فإن شريط الحالة والرأس يتداخلان.

باختصار ، أدوات تطوير المكتبات لـ Ionic Pro قديمة. هل يمكن لشخص ما من Ionic Pro أن يؤكد أنه يقوم بإصلاحه؟

لا أعتقد أن المشكلة في Ionic Pro فقط لأن لدي هذه المشكلة ولا أستخدمها على الإطلاق.

أرى هذه المشكلة في عمليات إنشاء الإنتاج (--prod) ، ولكن ليس بخلاف ذلك عند الإنشاء باستخدام Xcode9. كلاهما باستخدام أمر التشغيل أو الإنشاء متبوعًا بـ Xcode (وهو ما أستخدمه للتحميل إلى المتجر). الإصدار الأيوني 3.8.0 و Ionic CLI 3.15.2. تم الاختبار على جهاز يعمل بنظام iOS10.3 بعد الإبلاغ عن الجهاز الذي يعمل بنظام التشغيل 11.

سطر من index.html:
<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">

أعتقد في هذه المرحلة أنني غطيت كل شيء ، أليس كذلك؟

ما هو إصدار @ionic/app-scripts الذي تستخدمه؟

marioestradarosa - هل سجلت مشكلة بخصوص هذا في بوابة دعم Ionic Pro ؟ لا أعرف ما إذا كان أي من فريق Ionic Pro سيراقب بنشاط GitHub repo ، لكنهم سيراقبون ذلك.

@ kensodemann شكرًا ، هذا ما فاتني. لا يزال يحتوي على 3.0.0 بدلاً من 3.0.1.

kensodemann لقد قدمت تقريرًا يربط هذه المشكلة هنا ، الجمعة الماضية.

marcovtwout - ممتاز! شكرا لك.

+1
تمر بنفس المشكلة. لم يتم العثور على حل بعد.

+1
والجمعة هو الموعد النهائي لتطبيقي Oo

نفس المشكلة ، أنا أستخدم البرامج النصية للتطبيق 3.0.1

فقط قم بتعيينه في config.xml

       <platform name="ios">
               <preference name="StatusBarOverlaysWebView" value="false" />
       </platform>

أو استخدم البرنامج المساعد لشريط الحالة

       this.statusBar.overlaysWebView(false);

مرحبا جميعا! أخيرا قادرة على إعادة إنتاج هذا. إنه مزيج من إصدارات xcode القديمة على Pro وتحديثات iOS الأحدث. سنكون على اتصال بشأن التحديث. تمسك جيدا!

mhartington أي تحديثات؟

mhartington أنا أنتظر حلاً لهذا أيضًا. أي حلول أو حلول يمكنني تجربتها؟

أنا أستخدم هذا الحل البديل حتى يتم إصلاحه: https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

marcovtwout شكرا جزيلا. قرأت بعض التعليقات قائلة إنها لم تنجح معهم. أنا بالتأكيد أحاول هذا عندما عدت إلى المنزل

أواجه نفس المشكلة ، مصدري مع viewport-fit = cover

نجح حل

شكرًا ، اصطدمت بهذا بعد تحديث أيوني CLI.

ومن المثير للاهتمام أن استخدام viewport-fit = cover يعمل بشكل جيد ، إلا إذا كنت تنتقل من صفحة أيونية إلى صفحة مشروط إلى صفحة أخرى. ثم تختفي المساحة المتروكة النهائية للصفحة. لإصلاح ذلك احتجت إلى استخدام اقتراح yemenifree this.statusBar.overlaysWebView(false);

لمعلوماتي ، بالنسبة لي ، لا يعمل اقتراح config.xml كما هو الحال عند تشغيل إعداد كوردوفا الأيوني ، تتم إزالته من config.xml
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

أي تحديثات لهذه القضية؟

بالنسبة لي لم يكن كافيًا مع content="viewport-fit=cover, ..." .
لذلك أضفت هذا أيضًا في بدء تشغيل تطبيقي:
this.statusBar.overlaysWebView(false);

لقد اختبرت ذلك على جهاز iPhone الخاص بي وبدا كل شيء رائعًا.
ولكن ، بعد النشر في متجر التطبيقات ، يتعطل التطبيق عند بدء التشغيل !!!

أردت فقط أن تعرفوا جميعًا أنه قد تكون هناك مشاكل في تقديم هذا الإصلاح ...

واجهت مشكلة مماثلة وكنت أستخدم خدمة PhoneGap Build. إليك ما كان علي فعله لإصلاح المشكلة.

قم بتحديث السطر التالي في index.html لمشروعك الأيوني. يمكنك أن ترى أنني أضفت gap://ready file: في العلامة الوصفية.

<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *;img-src 'self' data: *">

قم بتحديث ملف config.xml بالتفضيل التالي حتى يعمل مع iOS 11. غير مطلوب لنظام iOS 10:
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

شكرا على الرد dmgfjaved! يعمل إعداد النظام الأساسي في config.xml بالنسبة لي. أتساءل لماذا لم يعمل عند القيام بنفس الشيء في الكود الزاوي ...
أردت أيضًا أن أشارك أن المشكلة التي واجهتها مع تطبيقي الذي يعمل في تصحيح الأخطاء ولكن لم يتم نشرها في متجر التطبيقات ، كانت متعلقة بإصدار XCode. كنت أستخدم الإصدار 9 أثناء الاختبار ، ولكن عندما حاولت إصدار التطبيق ، واجهت مشاكل. كان "الحل" هو إرجاع XCode إلى الإصدار 8 ، بحيث تغير تجميع التطبيق.

لا يزال بإمكاننا إعادة إظهار هذه المشكلة باستخدام أحدث إصدار من Ionic 3.9.2 و XCode الإصدار 8. هل هناك أي إصلاح قادم أو هل يتعين علينا محاولة إصلاحه بأنفسنا؟

لدي نفس المشكلة
لدي viewport-fit=cover ، ونتيجة مختلفة على الأجهزة الحقيقية

iPhone 7, ios 11.2 -> OK
iPhone 8, ios 11.2 -> Not OK

استخدام
@ionic/app-scripts: "3.0.0",
ionic: "3.13.0",

مرحبا جميعا! نشكرك على سعة صدرك المستمرة وتعليقاتك على هذا الأمر. أردت فقط أن أعطيكم يا رفاق تحديثًا بسيطًا حول ما وصلنا إليه من إصلاح هذا على جانب Ionic Pro:

1) كان لدى Ionic View for iOS مؤخرًا إصدارًا أصليًا جديدًا (سيتعين عليك التحديث من خلال متجر التطبيقات) يعمل على إصلاح مشكلة الرأس عند التحقق من الأشياء في العرض.

2) نحن نعمل بنشاط على إصلاح هذا من جانب الحزمة الأيونية وهي أولويتنا رقم 1 ، لقد كان الأمر أكثر انخراطًا من المعتاد لأننا نضيف ميزة جديدة في نفس الوقت حتى لا نكسر المشاريع القديمة عن طريق إصلاح خلل برمجي:

3) عندما يأتي الإصلاح الخاص بـ Ionic Package ، ستتمكن من اختيار XCode 8 أو XCode 9 بحيث يمكنك التحكم الكامل في ما نستخدمه لبناء تطبيقك. سنستمر في تنمية مكتبة الإعدادات والإصدارات المتاحة بمرور الوقت.

نأمل أن يتم إصداره قريبًا ، شكرًا لتفهمك!

شكرا،
غير لامع

ملاحظة: أعرف الكثير عن الجانب الاحترافي أكثر من جانب الإطار المحلي ، إذا كانت هناك مشكلات في الإنشاء محليًا (لا تستخدم الحزمة) ، فإنني أوصي بالترقية إلى XCode 9.

شكرًا matthewkremer - يمكنني أن أؤكد أن التحديث من xCode 8.3.3 إلى 9 حل مشكلتي حيث لم يتم تطبيق حشوة شريط الحالة عندما تم إنشاء التطبيق محليًا لجهاز iPhone 6 الذي يعمل بنظام iOS 11.2.

يجب الاهتمام بهذا الأمر لجميع عملاء Pro الآن.

لا تزال هذه المشكلة قائمة باستخدام أحدث برامج Ionic Native (4.5.2) وأحدث البرامج النصية للتطبيق (3.1.7)

$ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : android 6.2.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.0.0 
    Node       : v6.11.4
    npm        : 5.5.1 
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

jzwcars عليك البناء باستخدام Xcode 9 (ربما يجب توثيق ذلك في مكان ما خارج هذه المشكلة)

لسوء الحظ ، لا يمكنني إنشاء تطبيقي باستخدام xcode 9 لأن imac قديم جدًا ولا يمكنني تحديثه إلى سييرا. بدون سييرا no xcode 9 :-(

nicolasborn @ في هذه الحالة ، يمكنك استخدام خدمة Ionic Pro build https://github.com/ionic-team/ionic/issues/13294#issuecomment -341067770

marcovtwout : Ionic Pro مكلف للغاية لهذا الغرض. إنه مشروع خاص غير مدفوع الأجر. أنا أستخدم الحل البديل وآمل أن يعمل أيضًا مع iPhone x.

marcovtwout "تم إصلاح" المشكلة عند استخدام Xcode 9.

ومع ذلك ، فإن عددًا من المستخدمين (بما فيهم أنا) غير قادرين على الانتقال إلى Xcode 9 حتى الآن ، إما بسبب قيود نظام التشغيل / الأجهزة أو ببساطة لأن التجميع باستخدام Xcode 9 يقدم مجموعة كاملة من المشكلات الجديدة (على سبيل المثال ، حول التوقيع التلقائي ، رسائل الدفع .. .). لذلك نقدر حقًا ما إذا كان Xcode 8.x لا يزال مدعومًا.

قد تبدو مشكلة بسيطة في CSS / التخطيط ، لكنها تجعل حياة التطوير أكثر صعوبة بالنسبة لعدد غير قليل منا.

لا يزال لديك مساحة إضافية في header @ ios 10.3 (iphone 5s، iphone7plus) ،
ولكن لا توجد مساحة إضافية في محاكي iphone.

حزم cli: (/ usr / local / lib / node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

الحزم العالمية:

cordova (Cordova CLI) : 7.1.0

الحزم المحلية:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

نظام:

ios-deploy : 1.9.2 
Node       : v9.3.0
npm        : 5.6.0 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 `

sonicwong ، يرجى فتح مشكلة جديدة مع تحميل نموذج للتطبيق إلى جيثب.

لقد أمضيت فترة الظهيرة بأكملها في تصحيح الأخطاء لشريط الحالة ووجدت أنني لم أقم بإلغاء التعليق على السطر التالي في index.html.

<!-- cordova.js required for cordova apps (remove if not needed) -->
<!--<script src="cordova.js"></script>-->

كنت أقوم بتطوير PWA في البداية باستخدام أيوني. أبدأ في ترحيل PWA إلى التطبيق ثم أواجه هذه المشكلة.

ما زلت أواجه هذه المشكلة ، ولكن من المثير للاهتمام ، عندما أركز على أحد المدخلات ، يبدو أنه يصحح نفسه. هل راى احد اخر هذا؟

في هذه المرحلة ، لست متأكدًا مما يجب أن أحاوله. لقد أضفت علامات منفذ العرض ، وجربت كلاً من JS وإصدارات التكوين من StatusBarOverlaysWebView ، وحتى أعدت تكوين مشروعي بالكامل من البداية. أيه أفكار؟

لا يزال مع هذه القضية أيضا. لقد حاولت إضافة this.statusBar.overlaysWebView(false); وأيضًا في config.xml ، لدي content="viewport-fit=cover وقمت بتحديث Xcode إلى Version 9.3 (9E145)

حزم cli: (/ usr / local / lib / node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

الحزم العالمية:

cordova (Cordova CLI) : 8.0.0

الحزم المحلية:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

نظام:

Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.6.0 
OS                : macOS High Sierra

الإضافات:

cordova-plugin-device 1.1.7 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-fullscreen 1.1.0 "cordova-plugin-fullscreen"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.2.0 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

لقد وجدت أن هناك خطأ في الحجم عند استخدام أجهزة iOS مع نظام التشغيل OS10.3. كل شيء يسير بشكل صحيح بعد ترقية نظام التشغيل إلى 11.x. (لا يوجد خطأ في المحاكاة)

أي أخبار حول إصلاحه لـ xcode 8؟

mhartington لقد تتنقل في صفحة جديدة بطريقة https://github.com/ionic-team/ionic/issues/14401

لقد كنت أواجه هذه المشكلة أيضًا. بالنسبة لي ، عندما أقوم بتشغيل ionic cordova run ios فإنه يعمل بشكل مثالي ، ومع ذلك ، عند النشر مع XCode 9 ، كنت أعاني من التداخل.

اكتشفت أنه في مشروعي ، تم فحص الإعداد "يتطلب ملء الشاشة". انظر الصورة.
screenshot of incorrect setting

بعد إلغاء تحديد هذا الإعداد وإنشاء بنية أخرى باستخدام XCode ، تم إصلاح المشكلة. أتمنى أن يساعدك هذا.

قد يكون هذا المفصل مفيدًا
https://ayogo.com/blog/ios11-viewport/

لقد واجهت هذه المشكلة أيضًا وبعد تطبيق statusBar.overlaysWebView(false); تم إصلاح المشكلة.

شكرا على القضية! تم قفل هذه المشكلة لمنع التعليقات غير ذات الصلة بالمشكلة الأصلية. إذا استمرت المشكلة في أحدث إصدار من Ionic ، فيرجى إنشاء مشكلة جديدة والتأكد من ملء النموذج بالكامل.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات