Почему мобильный хром неправильно масштабирует и позиционирует некоторые элементы?

Question

[Андрей]

Если на странице указан тег и его содержимое таким образом:

<meta name="viewport" content="width=device-width, initial-width=1.0"/>

то браузер масштабирует страницу на мобильном устройстве.
Но в chrome на мобильном андроиде, если добавить, например, кнопку с фиксированным позиционированием снизу, и страница не помещается по ширине (например, если длинная таблица), то кнопка уезжает за пределы экрана (по ощущениям, она уезжает так, чтобы сохранить пропорции документа).
Пример

spoiler

Если добавить
user-scalable=no
то кнопка отображается как нужно, но, соответственно, масштабирование пропадёт.
Пример

spoiler

В мобильном firefox такой проблемы нет.

Почему так происходит и как это правильно победить?

Answer 1

[Антон Спирин]

Не допускайте появления горизонтального скролла для всей страницы в мобильной версии.
Для таблиц можно использовать контейнер со скроллом.
Почитайте статью про таблицы в адаптивном дизайне.
Там есть готовые решения.

Comments

[Максим]

или вообще переверстать на псевдотаблицы ...