Приложение Cordova не может щелкнуть элементы точно по местоположению
Я протестировал свое приложение на основе Cordova на симуляторе iPhone 11 Pro Max. все выглядит хорошо, как дизайн. Но я понял, что не могу щелкнуть элементы, которые хочу щелкнуть. Мне нужно щелкнуть примерно на 20 пикселей выше того, что я хочу щелкнуть. Это для каждого элемента на странице.
Например, мне нужно щелкнуть желтый кружок, чтобы открыть вкладку, показанную красным кружком на скриншоте ниже.
Мой index.html
<meta name = "viewport" content = "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
**Если я добавлю viewport-fit=cover, клики будут в порядке, но на этот раз под панелью вкладок будет большая (действительно большая) область. именно так:Проблемный экран приложения ionic на iPhone 11 Pro Max
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id=“xx” version = "0.0.7" xmlns = "http://www.w3.org/ns/widgets" xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:cdv = "http://cordova.apache.org/ns/1.0">
<content src = "index.html" />
<access origin = "*" />
<allow-navigation href = "*" />
<allow-intent href = "http://*/*" />
<allow-intent href = "https://*/*" />
<allow-intent href = "tel:*" />
<allow-intent href = "sms:*" />
<allow-intent href = "mailto:*" />
<allow-intent href = "geo:*" />
<preference name = "ScrollEnabled" value = "false" />
<preference name = "BackupWebStorage" value = "none" />
<preference name = "SplashMaintainAspectRatio" value = "true" />
<preference name = "FadeSplashScreenDuration" value = "300" />
<preference name = "SplashShowOnlyFirstTime" value = "false" />
<preference name = "SplashScreen" value = "screen" />
<preference name = "SplashScreenDelay" value = "3000" />
<preference name = "orientation" value = "portrait" />
<preference name = "android-targetSdkVersion" value = "29" />
<preference name = "scheme" value = "app" />
<preference name = "hostname" value = "localhost" />
<preference name = "WKWebViewOnly" value = "true" />
<platform name = "ios">
<allow-intent href = "itms:*" />
<allow-intent href = "itms-apps:*" />
<icon height = "57" src = "resources/ios/icon/icon.png" width = "57" />
<icon height = "114" src = "resources/ios/icon/[email protected]" width = "114" />
<icon height = "29" src = "resources/ios/icon/icon-small.png" width = "29" />
<icon height = "58" src = "resources/ios/icon/[email protected]" width = "58" />
<icon height = "87" src = "resources/ios/icon/[email protected]" width = "87" />
<icon height = "20" src = "resources/ios/icon/icon-20.png" width = "20" />
<icon height = "40" src = "resources/ios/icon/[email protected]" width = "40" />
<icon height = "60" src = "resources/ios/icon/[email protected]" width = "60" />
<icon height = "48" src = "resources/ios/icon/[email protected]" width = "48" />
<icon height = "55" src = "resources/ios/icon/[email protected]" width = "55" />
<icon height = "29" src = "resources/ios/icon/icon-29.png" width = "29" />
<icon height = "58" src = "resources/ios/icon/[email protected]" width = "58" />
<icon height = "87" src = "resources/ios/icon/[email protected]" width = "87" />
<icon height = "40" src = "resources/ios/icon/icon-40.png" width = "40" />
<icon height = "80" src = "resources/ios/icon/[email protected]" width = "80" />
<icon height = "120" src = "resources/ios/icon/[email protected]" width = "120" />
<icon height = "88" src = "resources/ios/icon/[email protected]" width = "88" />
<icon height = "50" src = "resources/ios/icon/icon-50.png" width = "50" />
<icon height = "100" src = "resources/ios/icon/[email protected]" width = "100" />
<icon height = "60" src = "resources/ios/icon/icon-60.png" width = "60" />
<icon height = "120" src = "resources/ios/icon/[email protected]" width = "120" />
<icon height = "180" src = "resources/ios/icon/[email protected]" width = "180" />
<icon height = "72" src = "resources/ios/icon/icon-72.png" width = "72" />
<icon height = "144" src = "resources/ios/icon/[email protected]" width = "144" />
<icon height = "76" src = "resources/ios/icon/icon-76.png" width = "76" />
<icon height = "152" src = "resources/ios/icon/[email protected]" width = "152" />
<icon height = "167" src = "resources/ios/icon/[email protected]" width = "167" />
<icon height = "172" src = "resources/ios/icon/[email protected]" width = "172" />
<icon height = "196" src = "resources/ios/icon/[email protected]" width = "196" />
<icon height = "1024" src = "resources/ios/icon/icon-1024.png" width = "1024" />
<splash height = "480" src = "resources/ios/splash/Default~iphone.png" width = "320" />
<splash height = "960" src = "resources/ios/splash/Default@2x~iphone.png" width = "640" />
<splash height = "1024" src = "resources/ios/splash/Default-Portrait~ipad.png" width = "768" />
<splash height = "768" src = "resources/ios/splash/Default-Landscape~ipad.png" width = "1024" />
<splash height = "1125" src = "resources/ios/splash/Default-Landscape-2436h.png" width = "2436" />
<splash height = "1242" src = "resources/ios/splash/Default-Landscape-736h.png" width = "2208" />
<splash height = "2048" src = "resources/ios/splash/Default-Portrait@2x~ipad.png" width = "1536" />
<splash height = "1536" src = "resources/ios/splash/Default-Landscape@2x~ipad.png" width = "2048" />
<splash height = "2732" src = "resources/ios/splash/Default-Portrait@~ipadpro.png" width = "2048" />
<splash height = "2048" src = "resources/ios/splash/Default-Landscape@~ipadpro.png" width = "2732" />
<splash height = "1136" src = "resources/ios/splash/Default-568h@2x~iphone.png" width = "640" />
<splash height = "1334" src = "resources/ios/splash/Default-667h.png" width = "750" />
<splash height = "2208" src = "resources/ios/splash/Default-736h.png" width = "1242" />
<splash height = "2436" src = "resources/ios/splash/Default-2436h.png" width = "1125" />
<splash height = "2732" src = "resources/ios/splash/Default@2x~universal~anyany.png" width = "2732" />
<icon height = "57" src = "resources/ios/icon/icon.png" width = "57" />
<icon height = "114" src = "resources/ios/icon/[email protected]" width = "114" />
<icon height = "20" src = "resources/ios/icon/icon-20.png" width = "20" />
<icon height = "40" src = "resources/ios/icon/[email protected]" width = "40" />
<icon height = "60" src = "resources/ios/icon/[email protected]" width = "60" />
<icon height = "29" src = "resources/ios/icon/icon-29.png" width = "29" />
<icon height = "58" src = "resources/ios/icon/[email protected]" width = "58" />
<icon height = "87" src = "resources/ios/icon/[email protected]" width = "87" />
<icon height = "48" src = "resources/ios/icon/[email protected]" width = "48" />
<icon height = "55" src = "resources/ios/icon/[email protected]" width = "55" />
<icon height = "88" src = "resources/ios/icon/[email protected]" width = "88" />
<icon height = "172" src = "resources/ios/icon/[email protected]" width = "172" />
<icon height = "196" src = "resources/ios/icon/[email protected]" width = "196" />
<icon height = "216" src = "resources/ios/icon/[email protected]" width = "216" />
<icon height = "40" src = "resources/ios/icon/icon-40.png" width = "40" />
<icon height = "80" src = "resources/ios/icon/[email protected]" width = "80" />
<icon height = "120" src = "resources/ios/icon/[email protected]" width = "120" />
<icon height = "50" src = "resources/ios/icon/icon-50.png" width = "50" />
<icon height = "100" src = "resources/ios/icon/[email protected]" width = "100" />
<icon height = "60" src = "resources/ios/icon/icon-60.png" width = "60" />
<icon height = "120" src = "resources/ios/icon/[email protected]" width = "120" />
<icon height = "180" src = "resources/ios/icon/[email protected]" width = "180" />
<icon height = "72" src = "resources/ios/icon/icon-72.png" width = "72" />
<icon height = "144" src = "resources/ios/icon/[email protected]" width = "144" />
<icon height = "76" src = "resources/ios/icon/icon-76.png" width = "76" />
<icon height = "152" src = "resources/ios/icon/[email protected]" width = "152" />
<icon height = "167" src = "resources/ios/icon/[email protected]" width = "167" />
<icon height = "1024" src = "resources/ios/icon/icon-1024.png" width = "1024" />
<splash height = "1136" src = "resources/ios/splash/Default-568h@2x~iphone.png" width = "640" />
<splash height = "1334" src = "resources/ios/splash/Default-667h.png" width = "750" />
<splash height = "2688" src = "resources/ios/splash/Default-2688h~iphone.png" width = "1242" />
<splash height = "1792" src = "resources/ios/splash/Default-1792h~iphone.png" width = "828" />
<splash height = "2436" src = "resources/ios/splash/Default-2436h.png" width = "1125" />
<splash height = "2208" src = "resources/ios/splash/Default-736h.png" width = "1242" />
<splash height = "2048" src = "resources/ios/splash/Default-Portrait@2x~ipad.png" width = "1536" />
<splash height = "2732" src = "resources/ios/splash/Default-Portrait@~ipadpro.png" width = "2048" />
<splash height = "1024" src = "resources/ios/splash/Default-Portrait~ipad.png" width = "768" />
<splash height = "960" src = "resources/ios/splash/Default@2x~iphone.png" width = "640" />
<splash height = "480" src = "resources/ios/splash/Default~iphone.png" width = "320" />
<splash height = "2732" src = "resources/ios/splash/Default@2x~universal~anyany.png" width = "2732" />
<icon height = "57" src = "resources/ios/icon/icon.png" width = "57" />
<icon height = "114" src = "resources/ios/icon/[email protected]" width = "114" />
<icon height = "20" src = "resources/ios/icon/icon-20.png" width = "20" />
<icon height = "40" src = "resources/ios/icon/[email protected]" width = "40" />
<icon height = "60" src = "resources/ios/icon/[email protected]" width = "60" />
<icon height = "29" src = "resources/ios/icon/icon-29.png" width = "29" />
<icon height = "58" src = "resources/ios/icon/[email protected]" width = "58" />
<icon height = "87" src = "resources/ios/icon/[email protected]" width = "87" />
<icon height = "48" src = "resources/ios/icon/[email protected]" width = "48" />
<icon height = "55" src = "resources/ios/icon/[email protected]" width = "55" />
<icon height = "88" src = "resources/ios/icon/[email protected]" width = "88" />
<icon height = "172" src = "resources/ios/icon/[email protected]" width = "172" />
<icon height = "196" src = "resources/ios/icon/[email protected]" width = "196" />
<icon height = "216" src = "resources/ios/icon/[email protected]" width = "216" />
<icon height = "40" src = "resources/ios/icon/icon-40.png" width = "40" />
<icon height = "80" src = "resources/ios/icon/[email protected]" width = "80" />
<icon height = "120" src = "resources/ios/icon/[email protected]" width = "120" />
<icon height = "50" src = "resources/ios/icon/icon-50.png" width = "50" />
<icon height = "100" src = "resources/ios/icon/[email protected]" width = "100" />
<icon height = "60" src = "resources/ios/icon/icon-60.png" width = "60" />
<icon height = "120" src = "resources/ios/icon/[email protected]" width = "120" />
<icon height = "180" src = "resources/ios/icon/[email protected]" width = "180" />
<icon height = "72" src = "resources/ios/icon/icon-72.png" width = "72" />
<icon height = "144" src = "resources/ios/icon/[email protected]" width = "144" />
<icon height = "76" src = "resources/ios/icon/icon-76.png" width = "76" />
<icon height = "152" src = "resources/ios/icon/[email protected]" width = "152" />
<icon height = "167" src = "resources/ios/icon/[email protected]" width = "167" />
<icon height = "1024" src = "resources/ios/icon/icon-1024.png" width = "1024" />
<splash height = "1136" src = "resources/ios/splash/Default-568h@2x~iphone.png" width = "640" />
<splash height = "1334" src = "resources/ios/splash/Default-667h.png" width = "750" />
<splash height = "2688" src = "resources/ios/splash/Default-2688h~iphone.png" width = "1242" />
<splash height = "1242" src = "resources/ios/splash/Default-Landscape-2688h~iphone.png" width = "2688" />
<splash height = "1792" src = "resources/ios/splash/Default-1792h~iphone.png" width = "828" />
<splash height = "828" src = "resources/ios/splash/Default-Landscape-1792h~iphone.png" width = "1792" />
<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" />
<splash height = "2208" src = "resources/ios/splash/Default-736h.png" width = "1242" />
<splash height = "1242" src = "resources/ios/splash/Default-Landscape-736h.png" width = "2208" />
<splash height = "1536" src = "resources/ios/splash/Default-Landscape@2x~ipad.png" width = "2048" />
<splash height = "2048" src = "resources/ios/splash/Default-Landscape@~ipadpro.png" width = "2732" />
<splash height = "768" src = "resources/ios/splash/Default-Landscape~ipad.png" width = "1024" />
<splash height = "2048" src = "resources/ios/splash/Default-Portrait@2x~ipad.png" width = "1536" />
<splash height = "2732" src = "resources/ios/splash/Default-Portrait@~ipadpro.png" width = "2048" />
<splash height = "1024" src = "resources/ios/splash/Default-Portrait~ipad.png" width = "768" />
<splash height = "960" src = "resources/ios/splash/Default@2x~iphone.png" width = "640" />
<splash height = "480" src = "resources/ios/splash/Default~iphone.png" width = "320" />
<splash height = "2732" src = "resources/ios/splash/Default@2x~universal~anyany.png" width = "2732" />
<splash src = "resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src = "resources/ios/splash/Default@3x~iphone.png" />
<splash height = "2436" src = "resources/ios/splash/[email protected]" width = "1125" />
<splash src = "resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src = "resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src = "resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src = "resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src = "resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src = "resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src = "resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src = "resources/ios/splash/Default@2x~ipad~comany.png" />
</platform>
<plugin name = "cordova-plugin-whitelist" spec = "^1.3.3" />
<plugin name = "cordova-plugin-ionic-keyboard" spec = "^2.2.0" />
<plugin name = "cordova-sqlite-storage" spec = "^5.1.0" />
<plugin name = "cordova-plugin-device" spec = "^2.0.3" />
<plugin name = "cordova-plugin-app-version" spec = "^0.1.9" />
<plugin name = "cordova-clipboard" spec = "^1.3.0" />
<plugin name = "onesignal-cordova-plugin" spec = "^2.11.2" />
<plugin name = "cordova-plugin-statusbar" spec = "https://github.com/apache/cordova-plugin-statusbar.git" />
<plugin name = "cordova-plugin-splashscreen" spec = "^6.0.0" />
<plugin name = "cordova-plugin-ionic-webview" spec = "^4.2.1">
<variable name = "ANDROID_SUPPORT_ANNOTATIONS_VERSION" value = "27.+" />
</plugin>
<engine name = "android" spec = "7.0.0" />
<engine name = "ios" spec = "^6.1.1" />
</widget>
Система:
Ionic:
Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.9
@ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 8.1.2 ([email protected])
Cordova Platforms : ios 6.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 8 other plugins)
Utility:
cordova-res (update available: 0.15.2) : 0.8.1
native-run : not installed
System:
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.12.0
OS : macOS Big Sur
Xcode : Xcode 12.3 Build version 12C33
Спасибо.
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
189
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
На самом деле это может быть ошибка xCode SDK. Можете ли вы попробовать Xcode 9 и посмотреть, сможете ли вы воспроизвести проблему? Вам придется экспортировать ipa и установить его вручную.
Да, я знаю, это займет некоторое время, вы можете сначала попробовать другие решения и оставить это как последнюю альтернативу. У меня была проблема с прокруткой, я исправил ее таким образом. Удачи
—
21.12.2020 18:07
Ответ принят как подходящий
Наконец я решил.
-Я обновил Cordova-plugin-ionic-webview до версии 5.0.0.
-Я установил @ionic-native/ionic-webview (версия 5.30.0)
Затем я добавил «viewport-fit=cover» в index.html.
<meta name = "viewport" content = "viewport-fit=cover user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
наконец, я добавил следующий css в app.scss
body{
margin: 0;
margin-top: env(safe-area-inset-top);
background: linear-gradient(285deg, #329d65 0%, #019f56 37%, #067247 100%) !important; //without this, status bar background will be white.
}
Теперь все работает идеально. я надеюсь, что это помогло кому-то.
Другие вопросы по теме
Как мне обновить переменные среды ANDROID_SDK_ROOT/JAVA_HOME/PATH на MAC для сборки Android
Определите, есть ли у устройства доступ к галерее приложений Huawei с помощью Cordova
Каталог устройств Android не создается, когда я устанавливаю целевой API как 29
Маршрутизация приложений работает в веб-сборке, но не работает в сборке Cordova
Ionic 5 Маркеры Google Maps мерцают при масштабировании
CordovaError: не удалось найти переменную среды JAVA_HOME. Попробуйте установить вручную
Ionic 4: отправка файлов в приложение из другого приложения (галерея/браузер файлов)
Как предотвратить автоматическую прокрутку скрытого div
Приложение Ionic — приложение ссылается на закрытые селекторы в полезной нагрузке
Cordova Cli — не найдены пригодные для использования инструменты сборки Android
Похожие вопросы
Клавиатура SwiftUI появляется один раз для ввода и продолжает появляться и исчезать
Веб-сайты php codeigniter, показывающие, что они не подключены к серверу в телефоне Safari iOS
Как установить заголовок кнопки с другого контроллера представления в Swift?
Firebase - можно ли заблокировать номер телефона от регистрации
Как ввести Enum в Double в Swift
SwiftUI TextField урезан пополам
Кнопки Xcode Swift во втором контейнере не работают
PHPickerViewController добавляет экран редактирования видео, также известный как (UIImagePickerController.allowsEditing = true)
Ошибка UICollectionViewCompositionalLayout в iOS 14.3
Использование бесполезного object.self.self.. или Class.self.self.. когда-нибудь понадобится?
вы испытали решение? Понижение версии xcode займет много времени. Я не хочу делать это, не будучи уверенным:/