Столкнулся с проблемой корректного отображения в iOS, да и в андроиде не на всех версиях нормально отображается. Подскажите пожалуйста, как решить проблему! Посмотреть можно по этой ссылке: http://decor-santehnika.ru/glyk/
Так это выглядит в iOS
Так как у вас хедер завёрстан таблицей (display table и table-cell), то он и ведёт себя как таблица: когда одна из «ячеек» переполняется, она начинает «распирать» хедер и остальные ячейки ужимаются.
На картинке ясно видно, что в блоке с уведомлениями, гаражом и корзиной увеличен размер шрифта (видимо из-за особенностей платформы), что «распирает» эту «ячейку» и заставляет «ячейку» с кнопками ужиматься, что в свою очередь заставляет кнопки свалиться на вторую строку.
Постарайтесь отладить вёрстку так, чтобы она в обычном десктопном браузере была «пуленепробиваемой»: нигде ничего не отваливалось и не спадало при изменении размера шрифта или разрешения экрана. Тогда и на айосе и андроиде скорее всего будет приемлемо.
Второй вопрос — это контролы. Из картинки видно, что кнопка «Найти» отображается по-другому нежели на десктопе. Это тоже нужно учитывать при вёрстке: нужно принять как данность, что на разных системах контролы могут выглядеть по-разному, и постараться вписать их более-менее гармонично в дизайн.
Либо можно заморочиться с переопределением всех стилей, чтобы везде было одинаково (но это неблагодарное дело).
Огромное спасибо за ответ!!!
Верхнее меню верстал таблицей так как многие элементы должны иметь возможность изменять зазмер, а именно: область города, область за уведомлениями(кружок преобразуется в вытянутое окошко в зависимости от количества цифр), сумма в корзине то же меняется. При этом ничего не должно разъезжаться и блок: Уведомления, Мой гараж, Корзина должен центрироваться относительно кнопки ВОЙТИ и БАЛЛОВ, если можно сверстать это другим образом, подскажите как, я неделю бился над этим, и только таблицей получилось.
Заранее спасибо за ответ!
PS: что значит переопределение стилей и как это делается для iOS ?
Под переопределением имел в виду то, что если в айосе, к примеру, у кнопки скруглённые углы, а вы хотите, чтобы них не было, то можно отключить «вид» по умолчанию для вебкит-браузеров -webkit-appearance: none; и задать своё скругление. Но это не очень хороший путь, так как для всех систем всех особенностей не представить. Поэтому лучше так не делать =)
То же самое с текстом ссылок «уведомления, гараж и корзина»: разные браузеры могут устанавливать разный размер шрифта по умолчанию для ссылок. Чтобы привести всё к единому виду, обычно делают «нормализацию» стилей, т.е. задают первоначальные значения для всех элементов: цвета, размеры шрифтов, отступы и другие свойства. Кстати, вот этот проект в тему.
Хотфикс в вашем случае: задать размер шрифта для .top-menu a, тем самым переопределив значение, которое может задавать браузер по умолчанию. Думаю поможет.
1 лайк
Что то ничего не выходит, не пойму, чего куда писать…
***вот, что получилось на данный момент***
Ну вот, уже лучше, так держать =)
Спасибо огромное, за помощь!!! Подскажите уж как кнопку доделать до ума и с чего обычный текст вдруг отобразился как ссылка?
Я уверен эта информация будет многим полезна!!!
Кнопке можно задать нужный height или line-height.
А текст отобразился как ссылка, потому что браузер посчитал текст телефонным номером (это тоже можно переопределить насильно, но нужно ли?)
так это понятно, что можно height задать, но тогда в других браузерах она то же изменится, или нет?
да, нужно подобрать размер шрифта, паддинги и высоту, чтоб везде было одинаково
А как написать правило конкретно для iOS применительно к кнопке? Я просто в это деле новичок совсем, тыкаюсь в слепую, а в академии почему то эта тема особо не освещалась.
Привязываться к конкретному браузеру — плохая практика: сегодня он такой, завтра станет другим. Поэтому лучше искать универсальное решение. Для этого нужно понять просто, в чём различия кнопок в десктопном браузере и мобильном. Кстати, на iOS мобильный Safari.
На маке в safari у меня всё нормально отображается
А не подскажете, можно ли каким то образом интропретировать мобильный safari под виндой? У меня просто нет айфона и приходится знакомым звонить что бы скрин прислали, я уже утомил порядком всех этими просьбами)))
Эмулировать, вы имели в виду? =)
Под виндоус локально никак, под маком есть iOS Simulator.
Ну или ещё можно воспользоваться http://browserstack.com/, но там недолго бесплатно.
Еще раз огромное спасибо за советы!!!
Вы писали, что под MacOS есть эмуляторы iOS, посоветуйте какой?
Буду очень признателен.
Спасибо огромное!!! всё с симулятором
получилось! Только с кнопкой и отображением текста как ссылка, ничего не выходит.
Очень радует, что есть отзывчивые люди, готовые помочь!!!
Еще раз спасибо!!!
1 лайк