Как сделать адаптацию под iOS Safari?

Question

[Андрей Стеценко]

Добрый день!
Делаю сайт на WordPress, взял готовую нулевую тему, и переделываю полностью дизайн (лайфхаки однако). Сделал я полностью дизайн, сделал адаптацию под мобильные устройства. Проблема в том, что, сайт очень не корректно отображается на iPhone, в браузере safari. Я, вроде как, сделал кросс браузерность, но сафари мне не дает покоя уже неделю. При том что абсолютно все браузеры на всех устройствах все корректно отображают. Возможно есть какие то фишки с сафари, которые я не знаю? Или он требует дополнительного и отдельного кода? Стили на CSS, фреймворки не использовал.

Ссылка на сайт: https://bankeer.net
Сайт доделываю, по этому есть костыли и сдвиги в мобильной версии

Answer 1

[Сергей Горячев]

Или он требует дополнительного и отдельного кода?

Как правило нет, небольшие фичи для форм, больше ничего.

Делаю сайт на WordPress, взял готовую нулевую тему, и переделываю полностью дизайн (лайфхаки однако).

Подозреваю, что в теме было много говнокода, который перекрывает что-то.
И думается мне, что сафари это не единственная проблема.

Неплохо бы ссылку посмотреть.

Comments

[Андрей Стеценко]

Добавил в тему
Говнокод возможно есть, но не должно быть много

[Андрей Стеценко]

Еще такой момент: при вертикальном просмотре в сафари все плохо, а в горизонтальном все ОК. Медиа запросы на screen - 960 px, 960px - 830px, 830px - 240px. Последний с процентами а не фиксированной версткой

[Сергей Горячев]

Andrey379, одна фигня, что в горизонтальном, что в вертикальном.

[Сергей Горячев]

Andrey379, но говорить особенно нечего, пока ты не исправишь мелкие косяки, с перелетом строк, с абсолютом, с вылетом элементов за пределы экрана - советовать что-либо бесполезно.

[Сергей Горячев]

Andrey379, единственное, меня сильно смущает meta viewport 0.5, чет ни туда, ни сюда.

[Андрей Стеценко]

Мне непонятно почему на всех браузерах все ОК кроме сафари. View port 0.5 поставил из за того что торопился с адаптивом, а так нормально стало отображаться. Если в нем тоже может быть проблема, адаптив переделаю и поставлю 1.

[Сергей Горячев]

Andrey379, да и отсутствие initial-scale , не понятно, от чего он тогда будет брать maximum-scale. Но возможно, проблема всего лишь в "разлетах блоков".

[Сергей Горячев]

Andrey379, хром, яндекс браузер, мозилла и сафари показывают у меня одинаково на айфоне.

[Сергей Горячев]

Andrey379, одинаково плохо) Но тебе могу посоветовать очистить кэш сафари, возможно мы говорим про разные вещи, а у тебя просто в кэше что-то висит.

[Сергей Горячев]

Andrey379, а нет, есть небольшое различие, но не существенное, на сафари он помельче просто. но в целом, блоки везде едут одинаково.

[Андрей Стеценко]

Сейчас потекший дизайн на телефонах т.к. я не успел выравнивание сделать, грубо говоря, так и надо. Я говорю о том, что, на сафари отображается как на пк, а в остальных все правильно

[Сергей Горячев]

Andrey379, неа, на сафари мобильная версия, кривая, но мобильная.

[Сергей Горячев]

Andrey379, чисть кэш полностью в настройках.

[Андрей Стеценко]

Вот, я и говорю, что на сафари сайт по меньше, и в этом проблема

[Сергей Горячев]

Andrey379, ну, ты исправь мне полетевшие блоки, добавь инитиал скейл, верни максимум скейл, тогда посмотреть надо. А пока у тебя блоки вылетают за край и сайт вписывается в браузер.

[Андрей Стеценко]

Спасибо большое! Доделаю - отпишу. И выложу описание решения

[Сергей Горячев]

Артём Петренков, естественно в курсе, но именно "недосафари", с выпеленными фичами.

[Андрей Стеценко]

Стоит ли ставить несколько viewport под разную плотность пикселей? И что лучше использовать, px, %, pt, vh, vw?

[Сергей Горячев]

Andrey379, device-width

[Андрей Стеценко]

Решение найдено.
Установил вьюпорт

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Все размеры вывел в проценты а не пиксели
Всем спасибо)