Почему ломаются эти блоки на 320, если в веб-инспекторе все в порядке?

Question

[Nikita Shchypylov]

Всем привет

На сайте есть поп-ап, вот он joxi.ru/brReML9UMjpLA1 - это в Хроме при 320 пикселях
Вот что получаю в реальном тесте на iPhone 5s - joxi.ru/823LJbBiMeklAO

Почему так может происходить?

Answer 1

[Кирилл]

Есть несколько вариантов - размеры кнопок не фиксированные, на телефоне другой шрифт - кнопки разъезжаются.
Либо кнопки инлайн-блоками сверстаны и им не сброшены font-size и line-height.
Ну и еще вариант, мелкий текст айфон увеличивает. Для этого задайте для body -webkit-text-size-adjust: 100%;

Comments

[Nikita Shchypylov]

Да, размера фиксированного нет
С текстом попробую

Answer 2

[dom1n1k]

Другой шрифт и другой рендеринг шрифта. Надписи на кнопках стали шире запланированного.
Никогда нельзя делать надписи впритык, всегда нужен небольшой запас по пространству.