! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2017-04-16
издатель:  в теме: HTML-CSS-PHP  реплики: будьте первым в диалоге
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

При перезагрузке страницы на мобильном телефоне сбивается межстрочный интервал — ошибки css вёрстки — свойство line-height

Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) — так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту — меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).

Скажу честно, сразу мелькнуло подозрение закавыки со свойством line-height, но я как-то о нём подзабыл в процессе… короче взялся за работу…

Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе — ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря — многие из тонких дефектов не отследить…

Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))

И если кому-то тема интересна, давайте разбираться: акуна-матата…


в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))

 

 

На мой взгляд, нынче есть достаточно неплохой браузер для обычных пользователей и их мобильников — Опера мини.

Главное его преимущество — лёгкость и скорость загрузки просматриваемых страниц, что немаловажно, имея у себя в арсенале качества нашего высокоскоростного интернета.

Я видел много товарищей (достаточно продвинутых в иной сфере, однако — мелких познаний интернетing)) которые ждут по минуте-две загрузку простенького сайта: это логично — если браузер без всяких экономических ограничений грузит всякие примочки js и пр. пр. прелести, фитюльки которых хороши только на стационарном компе. На мои советы использовать Оперу, большинство пользователей реагирует как на волка из леса, дескать, нужно переустанавливать «родной» браузер и причём ненароком попортить телефон… У меня все эти осторожности вызывают улыбку…

 

 

Ну ладно — приступим к теме:

 

 

 

 

 

ошибки css вёрстки — свойство line-height

 

 

 

 

Короче, в итоге около часовых исследований недр сайта на предмет лага (ошибки, бага… как угодно) оказалось виною свойство line-height, а точнее его значение !

 

Что получалось при моих тестах:

При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок — ошибка на лице окна браузера: действительно — расстояние между строк изменилось, стало в два раза шире по вертикали. В принципе можно читать и такой образ текста на мобиле… да и к тому же в мощных браузерах (и конечно же на компах) никаких ошибок не будет видно !! однако, заказчица (да и я) сочли этот экзерсис именно ошибкой, а коли — ошибка, значит нужно решать задачу!

 

 

Примечательно:

если просматривать сайт, не включая экономичный режим браузера — всё нормально (разъяснится ниже по тексту) но как только переключаюсь в режим экономии МГб и скоростей — баг !

К стати сказать: структура текста сайта возможно сломается и в шапке сайта, и в подвале, и в сайдбаре  — всё в прямой зависимости от языка (и ошибок) документа CSS вашего сайта!

Не забывайте обновлять документацию во время !

 

 

И всё-таки почему такие ошибки и нечитаемость браузером происходят??

 

Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))

 

Кратко:

Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) — ввиду чего «браузер» добивается приличных скоростей загрузки… и как следствие приятной работы.

Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!

 

Так же можно предположить «нечитаемость» всевозможными временными адаптациями языка CSS.

 

И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:

 

 

 

web студия Занимательная МИХАЛИКА

 

 

Такое свойство line-height, в случае применения к блочному элементу, всегда определяет высоту каждой текстовой строки. Однако не следует путать с межстрочным расстоянием (меж графическими элементами) в большинстве же графических программ (наподобие Photoshop), которое определяет пространство между строками в абзаце.

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

 

 

Свойство line-height использует следующие единицы:

 

 

  1. px
  2. em
  3. %
  4. безразмерные числа, вроде 1.5

 

Вот о безразмерных числа свойства и поговорим пристальнее)

 

 

Эти безразмерные значения в основном действуют как проценты. Таким образом — 150% равно 1.5. …последнее является, как понимаете, более компактным и читаемым, а в нашем случае обусловило ошибку нечитаемого экономным вариантом браузером.

 

То есть в шаблоне заказчицы (в файле стилей) свойство  было во всех случаях обозначено в px, что и привело к нечитаемости, а следовательно и ошибке.

 

Мне пришлось полностью прогнать файл стилей и поправить несоответствия.

 

 

Но — неприятность эту, мы пережили…

 

 

 

Знаний для:

 

 

 

почему важны правила line-height

 

 

 

 

Основной целью line-height является непременное определение комфортного расстояния (отступов) между строк для текста. Поскольку благоприятная удобочитаемость зависит от размера же текста, непременно рекомендуется использовать динамическое значение обусловленное размером текста.

 

Использование px — не рекомендуется, так как пиксели определяют статическое значение данных.

 

 

Однако использование пикселей в некоторых смыслах действительно пригодится — например, если вы хотите выровнять текст по вертикали в соответствии с иным каким-то элементом блога/сайта, а не в зависимости от размера шрифта!

 

Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:

 

для основного текста line-height рекомендуется как 1.5 от размера текста;

для заголовков line-height рекомендуется значение 1.2.

 

 

body { font-size: 16px; line-height: 1.5; }

 

 

Обработанная и вычисленная высота строки будет в нашем примере 16** 1.5 = 24px

 

 

 

наследование свойства line-height

 

 

 

К сведению:

Поскольку такое свойство как line-height наследуется дочерними элементами, то оно во всех графических примерах сайта будет оставаться постоянным, независимо от величин, которые font-size впоследствии применяется.

 

 

body { font-size: 16px; line-height: 1.5; }

blockquote { font-size: 18px; }

 

 

К примеру элемент <blockquote> будет иметь высоту строки 27px — полезно знать, ибо значения blockquote некоторые админы применяют в комментариях… следует визуализировать разность от основного текста статей.

 

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 


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

 

Подписаться на life-News студии занимательная Михалика
SendPulse - NoSpamX || Михалика ©

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
ещё статьи по теме:

меточная навигация:


Комментарии © 0 к статье: При перезагрузке страницы на мобильном телефоне сбивается межстрочный интервал — ошибки css вёрстки — свойство line-height

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

 для диалога необходимо принять правила конфиденциальности и пользовательского соглашения *
Яндекс.Метрика