При показе на смартфоне тексты наползают друг на друга

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

 

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

 

Любой браузер при уменьшении масштаба просмотра пересчитывает показ текста. При этом буквы показываются точками на экране, и если на крупном масштабе какой-то элемент буквы равен по размеру одной точке, то и при мелком масштабе этот элемент будет равен 1 точке, потому что экран не может показывать половину точки или четверть.

Если мы уменьшим масштаб в браузере на 20-30%  - буквы при этом могут не уменьшаться совсем, т.к. экран может изображать только целые точки, и не может показать, например,  1,7 точки, а будет показано 2 точки.

Поэтому при уменьшении масштаба просмотра, либо уменьшении экрана, текст браузером пересчитывается. При этом получается, что размеры окна/экрана изменились в несколько раз, а размер букв изменился меньше и текст стал крупнее относительно других элементов на странице.

 

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

 

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

 

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

 

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

     В то же время, мы сделали несколько ограничений в демо-версии:
1) Вы не можете создать сайт больше чем из 10 страниц.
2) Вы можете опубликовать сайт только на проверочное место, сайт на этом месте будет виден в Интернете в течение нескольких часов. Чтобы опубликовать сайт в любое другое место сети, вам надо купить полную версию.
3) При публикации демо-версия Сайткрафта опубликует только 5 страниц сайта. Так же и при просмотре в браузере вы увидете только 5 страниц сайта.
4) На опубликованной странице, "Сайткрафт" поставит предупреждение: "Эта страница сделана в демо-версии "Сайткрафта".
5) "Галерея" демо-версии содержит ограниченный набор картинок и кнопок.
6) Вы не можете обновить демо-версию.
7) Вы можете открыть сайт, сделанный в предыдущей версии (v 2 - 2005,
v 3- 2006), но при этом в новый формат переведутся только 10 первых страниц вашего сайта.
 
 
© 2002-2021 А.Недоря, © 2013-2021 ООО "Астра-Ком", ООО "Синергетик Лаб".
Запрещается копирование, распространение или любое иное использование информации и объектов без предварительного согласия.
При полном или частичном использовании материалов, обязательна ссылка на сайт  www.sitecraft.ru