Какие отличия в верстке под ios и android?
Столкнулся недавно с парой проблем на айфоне.
1)Конкретно у яблока наблюдались лаги всей страницы из-за того, что на кнопках висела тень со свойствами filter и drop-shadow .
2)Проблема со скроллом страницы через window.scrollTo() на элементе, на котором события по-умолчанию отменены
В обоих случаях на андроиде все работает отлично.
Возникает вопрос, а какие еще особенности есть при работе с айфоном?
Конкретного чего-то нагуглить не удалось, возможно неверно задаю вопросы.
Буду рад любой информации.
Дополнительно:
Надо бы насобирать еще материал, но
1. по поводу лагов - чем меньше фильтров, теней, прозрачностей - тем айфону легче. Не умеет в ускорение.
2. скролл - это отдельная БОЛЬНАЯ тема у айфонов. Причем у разных версий IOS они разные. Проблема в том, что реализация демонстрации куска верстки длинной страницы в окне браузера просто уродская. На старых айфонах, к примеру, не работал position fixed.
3. Никогда, просто НИКОГДА не пытайся прибить скользящее меню к низу страницы. Это и на андроиде выйдет дичайшим геммороем из-за автовсплывающих или автоскрывающихся панелей инструментов. Это ад и боль
4. В качестве задачи со звездочкой - попробуй реализовать модалку поверх контента, в которой свой скролл, и попробуй заблочить скролл контента в фоне. Айфон тебя порадует своими чудесами.
5. Думаю, будет весело перебирать высоту вьюпорта и подбирать позиционирование, переключаясь то на px то на wh.
6. Имей в виду - как бы не назывался браузер на айфоне - он использует одно и то же ядро сафари, специфичное для версии ios, так что глюки переносятся.
7. Ловил проблемы (тут уже не в платформе а в реализации сафари) именно в сафари если делаем display: flex, flex-direction: reverse, отваливается gap. Без реверса - всё гуд. На других реализациях таких проблем не встречал.
8. Если ты попробуешь поиграть с параллаксом самописанным - получишь ачивку "слабоумие и отвага"
- Одни и те же версии сафари могут по-разному работать на разных версиях оси
- Да уж. IE закопали наконец-то, но Safary подхватил упавшее знамя...
- не зря я всегда считал ай-фон
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для разработчиков веб-приложений, особенно тех, кто занимается созданием мобильных версий, важно понимать отличия в верстке под iOS и Android. Каждая из этих операционных систем имеет свои уникальные особенности, которые нужно учитывать при создании мобильного интерфейса.
Начнем с iOS. iOS имеет строгие рекомендации по дизайну, которые отражаются в Human Interface Guidelines от Apple. Эти рекомендации включают в себя использование специфических элементов управления, таких как кнопки, панели навигации, таббары и др. Кроме того, iOS обычно имеет более скругленные углы и более плоский дизайн по сравнению с Android.
Что касается Android, здесь у нас более разнообразные устройства и версии операционной системы, что может усложнить задачу создания универсального интерфейса. Android также предлагает свои рекомендации по дизайну в Material Design Guidelines, которые включают в себя принципы материального дизайна, цветовые схемы, теневые эффекты и др. Android-приложения обычно имеют более острые углы и более глубокий визуальный стиль.
При верстке под iOS и Android важно учитывать эти особенности и следовать рекомендациям каждой из платформ. Например, использование специфических элементов управления для каждой платформы, правильное расположение контента на экране, учет различий в типографике и цветовой гамме.
Пример верстки под iOS (используя HTML и CSS):
<title>iOS Design</title> <header> <h1>My iOS App</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <main> <p>Welcome to my iOS app!</p> </main> <footer> <p>© 2022 My iOS App</p> </footer><title>iOS Design</title> <header> <h1>My iOS App</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <main> <p>Welcome to my iOS app!</p> </main> <footer> <p>© 2022 My iOS App</p> </footer>
Пример верстки под Android (используя HTML и CSS):
<title>Android Design</title> <header> <h1>My Android App</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <main> <p>Welcome to my Android app!</p> </main> <footer> <p>© 2022 My Android App</p> </footer><title>Android Design</title> <header> <h1>My Android App</h1> </header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <main> <p>Welcome to my Android app!</p> </main> <footer> <p>© 2022 My Android App</p> </footer>
Используя соответствующие стили и элементы управления, вы сможете создать удобный и привлекательный интерфейс как для пользователей iOS, так и для пользователей Android.