Почему мобильные браузеры сжимают текст внутри блока?

Question

[Ruben Harutyunov]

Здравствуйте. Дело в том, что сайт некорректно отображается на мобильных устройствах с маленьким экраном. Текст в левом блоке сжимается (но блок не меняет своих размеров).
Это скриншот, сделанный с семидюймового планшета (все отображается нормально).

А это - с четырех дюймового смарта(текст сжимается)

Если я правильно понимаю, это особенность мобильных браузеров. Браузер сжимает текст до той ширины, которая вмещается в окно без прокрутки, но можно ли отключить эту особенность для конкретного сайта или каким-нибудь другим способом исправить отображение?
Исходники(обновил)

Answer 1

[Юрий Лобанов]

Вы ничего не сможете с этим поделать. Называется это auto-fit, в настройках браузера андроид отключается. На русском "Автоподгонка страницы".
Это не баг, это фича. Вы конечно можете поискать в сети по запросам disable auto fit html и прочее, но часто там встречаются статьи большой давности, которые используют хаки, которые уже не работают.
В любом случае, ключевое здесь - используются хаки. Пользователю это может не понравится. У меня, к примеру, данная возможность в настройках отключена, а кому-то она нужна. Раньше, когда я с трубы читал новости, то она была включена. Мне было плевать, что едет верстка, потому что заставлять пользователя пользоваться горизонтальным скроллом - это кощунство.

Comments

[Ruben Harutyunov]

Спасибо, нашел такую фичу(у меня называется "Мобильный вид"). Отключил ее и все отобразилось нормально. Если эта фича браузера, то исправлять не буду, пусть остается как есть. По крайней мере понял что дело не в верстке.

[Юрий Лобанов]

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

[Ruben Harutyunov]

@iiil посмотрел, тот же эффект как на моем сайте. Спасибо за ответ.

Answer 2

[Alexander Lashchevsky]

Попробуйте вставить в head

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

Успехов!

Comments

[Ruben Harutyunov]

Не помогает(

Answer 3

[hitakiri]

Доброго времени.
В хедер:

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

вставьте в css стили:

.flatblock-content{
display: inline;
width: 100%;
clear:bouth;
//на всякий случай 
letter-spacing: normal;
text-rendering: auto;
word-spacing: normal;
}

Comments

[Ruben Harutyunov]

Тоже не получается.

[hitakiri]

Тогда правьте верстку - вырезайте два дива flatblock-content и flatblock block-Об_Авторе, применяйте стили указанные мной выше к классу text.
Что за девайс вы используете, какой браузер ?

[Ruben Harutyunov]

Вырезать дивы не получиться, потому что они генерируются автоматически приложением. Zte Blade 3, стандартный браузер андроида, опера.

[hitakiri]

Попробуйте добавить теже стили к классу flatblock block-Об_Авторе , только уберите clear:bouth;

[Ruben Harutyunov]

Тоже не помогло. Думаю дело в initial-scale, потому что браузер при открытии не отображает его полностью(появляется полоса прокрутки).

[hitakiri]

Дело в кривом html, постарайтесь отредактировать шаблонизатор который генерит страничку, а не CSS заплатки ставить.

[Ruben Harutyunov]

@hitakiri Попробую, большое спасибо за помощь!

[Юрий Лобанов]

@hitakiri при чем тут верстка?
Вот вам пример простейшей верстки. jsfiddle.net/iiil/8gFvz/3/show
Откройте в стандартной браузере и попробуйте увеличить масштаб с включенным auto-fit и отключенным. Верстка тут вообще не при чем. Прочитайте мой ответ.

Answer 4

[whats]

Когда же вы наконец научитесь скидывать пример верстки или давать ссылки на исходники ?

А по скринам видно что у тебя не текст сжался а сам блок в котором текст находится

Comments

[Ruben Harutyunov]

Спасибо за ответ. Вот исходники yadi.sk/d/BSPR_6tuQ3uin

[Илья Лесных]

@K_DOT зачем архив-то, мало кто его будет качать. Есть же jsfiddle.net

[Юрий Лобанов]

@K_DOT Вы код можете выложить? Все страницы или участка. Что Вы отправляете архивы, ну кому хочется качать что-то себе и разбираться? Есть куча онлайн-сервисов, куда можно полностью выложить все с возможностью редактирования.

[Ruben Harutyunov]

jsfiddle.net/x8uUg/3