Мобильная версияЯ разработал прогрессивное веб-приложение (PWA) с использованием Vite-React, Tailwind, Next-UI, и оно безупречно работает на устройствах Android в различных браузерах. Дизайн и макет адаптивны и отлично отображаются на смартфонах Android.
Однако я столкнулся с проблемой при доступе к тому же PWA на мобильных устройствах iOS. В iOS дизайн нарушен во многих местах, что приводит к неидеальному пользовательскому интерфейсу.
Я тщательно протестировал PWA в разных браузерах iOS (например, Safari, Chrome), но проблема не устранена. Я также позаботился о том, чтобы настройки CSS и макета были одинаковыми как для Android, так и для iOS.
Я не понимаю, почему это происходит и как это решить. Я был бы признателен за любые идеи или решения, которые может иметь сообщество. Кто-нибудь еще сталкивался с подобной проблемой с React PWA на iOS? Будем очень признательны за любые предложения и рекомендации.
Заранее благодарим вас за помощь!
Левое изображение — Android-Chrome, правое — ios-Chrome. Вы можете видеть, как ломается конструкция. И самое главное, весь сайт адаптивный, единственная проблема — на iOS.
Это код для конкретной нижней навигации
import React, { useState } из 'реагировать'; // ** импортируем общие компоненты импортировать типографику из @shared/Typography; импортировать кнопку из @shared/Button; // ** импортируем ресурсы импортировать CartSvg из @icons/CartSvg; импортируйте DishSvg из @icons/DishSvg; импортировать HomeSvg из @icons/HomeSvg; // ** импорт для перевода импортировать {useTranslation} из 'реагировать-i18next'; // ** импортируем утилиты импортировать cn из @utils/cn; const BottomMenu = () => { const [selectedIndex, setSelectedIndex] = useState(0); const {t} = useTranslation(); const BottomMenuData = [ { svg: , inActiveSvg: , title: t('home'), to:"/menu" }, { svg: , inActiveSvg: , title: t('magic'), to:"/magic-items" }, { svg: , inActiveSvg: , title: t('cart'), to:"/order" }, ]; возвращаться ( {BottomMenuData.map((nav, index) => ( { setSelectedIndex(индекс); }} > {индекс == выбранныйиндекс? nav.svg: nav.inActiveSvg} {nav.title} ))} ); }; экспортировать BottomMenu по умолчанию;
