Сайткрафт конструктор сайтов

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

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

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

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

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

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

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

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