X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как оптимизировать сайт под мобильные устройства
vistr
vistr
Topic Starter сообщение 8.2.2018, 11:10; Ответить: vistr
Сообщение #1


Вопрос не касается работы метатега "viewport" - тут всё понятно.
Суть вопроса заключается в согласовании размера шрифта на экране
мобильника по отношению к div-блоку с конкретным размером ширины.

ИСХОДНАЯ СИТУАЦИЯ...
Допустим, есть div-блок с фиксированной шириной, равной 500px.
На экране компьютера в него входит 64 буквы.
А на экране мобильного устройства эти 64 буквы выходят за предел блока.

Другими словами, на мобильнике размер шрифта становится больше,
а размер ширины div-блока остаётся постоянным и равен исходному размеру.
Соответственно, весь текст "комкается" и не отвечает нужным требованиям.

ВОПРОС...
Кто знает, как оптимизировать шрифт компьютерной страницы под мобильник?
Заранее благодарю за ответ...
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
melrok
melrok
сообщение 8.2.2018, 12:57; Ответить: melrok
Сообщение #2


Не пробовали ставить размер шрифта не в px а в %
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vistr
vistr
Topic Starter сообщение 9.2.2018, 2:48; Ответить: vistr
Сообщение #3


В процентах пробовал - результат остаётся тот-же...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 9.2.2018, 5:15; Ответить: k0ttee
Сообщение #4


Я делаю ширину блоков max-width:100% а текст внутри сам поджимается.
Размер шрифта модно выставлять в em либо rem, но у меня он в пикселях.

У вас перенос текста на новую строку случайно не запрещен?


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vistr
vistr
Topic Starter сообщение 9.2.2018, 7:56; Ответить: vistr
Сообщение #5


Дело в том, что "резиновая" страница с max-width:100% не нужна.
А то что текст внутри блока пожимается - это естественно,
т.к. всё на странице приведено к единому масштабу экрана.

Онако сжимая экран, сроки "пожимаются" и переходят на новую
нижнюю строку, что и надо устранить, ограничавая строки тегом "br".
В этом случае нарушается длина строки в блоковом варианте
варианте текса с ФИКСИРОВАННЫМ значением ширины блока в px.
Естественно, что перенос строки в данном случае разрешён.

Но вариант с em по Вашей подсказке буду пробовать.
Хотя здесь есть вопрос:
К чему привязано исходное состояние em?... к html?... к body?... или к шрифту?...
И ещё один вопрос: А нельзя-ли привязать em к ширине div-блока?...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 9.2.2018, 13:10; Ответить: k0ttee
Сообщение #6


К чему привязано исходное состояние em?

К виртуальному пикселю экрана.
нельзя-ли привязать em к ширине div-блока?

Может быть на модных препроцессорах можно, на обычном CSS нельзя.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vistr
vistr
Topic Starter сообщение 9.2.2018, 14:44; Ответить: vistr
Сообщение #7


(k0ttee)
К чему привязано исходное состояние em?

К виртуальному пикселю экрана.
нельзя-ли привязать em к ширине div-блока?
Сдаётся мне, что em в исходном состоянии привязано к размеру шрифта,
прописанного в теге html до body... Кстати, это легко проверить...
Тут немного мотив оперы не соответствует партитуре.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alex001
alex001
сообщение 11.2.2018, 12:05; Ответить: alex001
Сообщение #8


Што то который раз сюда захожу, а никакого ответа нет. Вообще очень надо мой сайт сайт на сотике и на планше плывет и все строчки выходят за блок.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vistr
vistr
Topic Starter сообщение 11.2.2018, 12:37; Ответить: vistr
Сообщение #9


Ну если "вообще очень надо", то это дело нехитрое.
Как уже правильно сказал Kottee, в исходном состоянии загруженная страница привязана
к реальному размеру экрана в пикселях, что и определяет масштаб всего загруженного.
А масштаб у разных браузеров и в том числе на мобильных устройствах разный.

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

И получается, что шрифт на странице привязан к значению в пикселях, а шрифт на том-же
экране привязан к масштабу экрана браузера мобильного устойства.
Это несоответствие привязки блока и шрифта вызывает эффект увеличения букв и строки.

Для того, чтобы этого не происходило на странице, все элементы и шрифт надо привязать
к единому измерению, первичным источником является сам шрифт на странице.
Хотя сказано всего много, но самом деле всё делается примитивно просто:
в паспортном отделе страница, в теге <html> с помощью стиля прописывается размер
шрифта, от которого всё и "танцуется".

Это выглядит так:
<html style="font-family: Arial; font-size: 16px; line-height: 20px;">
Этим задаётся общий исходный размер всем элементам страницы.

А дальше всем блокам и прочим элементам надо задавать размер уже не в px, а в em
и они будут автоматически подогнаны браузером под размер шрифта...
Только нежелательно использовать %, т.к. они всё-таки дают достаточное несоответствие.
Вот и вся кухня...

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) ProxyLab — Мобильные прокси. 1 порт в 1 руки!
13 ProxyLab 3771 Сегодня, 1:17
автор: ProxyLab
Открытая тема (нет новых ответов) Ваш сайт блокирует Роскомнадзор?
23 hollywooduk 5091 Вчера, 10:43
автор: hollywooduk
Открытая тема (нет новых ответов) Тысячи ботовых переходов на сайт
18 Suagaring 4536 26.3.2024, 21:42
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1117 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
18 Needmylink1 6539 25.3.2024, 20:51
автор: Needmylink1


 



RSS Текстовая версия Сейчас: 28.3.2024, 18:09
Дизайн