Как же все-таки детектировать мобильник?

С.

Продвинутый новичок
Самый прямой способ через CSS @media. Все они сводятся к проверке ширины экрана или окна (для мобильников это одно и тоже).
Технически это работает, но сейчас у мобильников такое большое разрешение, что весь смысл такой проверки потерялся.
Они показывают десктопную версию, но так мелко, что читать текст невозможно. Надо зумить, что конечно же полная дурость с точки зрения пользователя.

Например есть содержание в виде inline-block'ов с шириной 50%. На десктопе они выстраиваются в две колонки. Для мобильников (экран уже 800px) ширина установлена 100% (в одну колонку). Но современный мобильник мельчит ниже границы физиологической читабельности, но лепит их в две.

Нашел @media (orientation: portrait). Вроде самое то, но на моем устройстве в двух браузерах (штатный и Хром) на это нет реакции. CSS3 @media handheld тоже не поддерживается. Впрочем это тоже не решение, поскольку в landscape и на планшетах и так все читается.

В мобильном Хроме есть опция "Показать упрощенно" (inline-block → block), тогда показывает по-человечески, но это не решение.

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

fixxxer

К.О.
Партнер клуба
Если задача в том, чтобы сделать слоновьего размера буквы, то оставь в покое. Задолбали такие слепые с их "заботой", заходишь с телефона и на тебе font-size: 100500.

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

С.

Продвинутый новичок
При чем здесь слоновий размер? Буквы вообще не читабельны. Включи в Хроме имитацию "Desktop site" и насладись. Только у меня он так показывает без имитации в мобильном режиме.

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

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

Ранее заметил, что если в тексте стоит текстовая же вставка с display:inline-block (для особого декорирования) он ее мельчит, а окружающий текст показывает в комфортном размере. Очень высоко-технологично, но тупо. Ну ладно исправил, пожертвовав декорированием.

Но здесь он мельчит блоки целиком (и совсем не inline-block, а полноценные block). Почему браузер обрабатывает отдельные элементы текста с разным масштабом? Прямо горе от ума.
 

С.

Продвинутый новичок
это надо с кривой версткой разбираться. Скорее всего мешанина px и pt/[r]em.
Не стоит считать себя умнее и прозорливее других. Второй подряд высокомерно-оскорбительный К.О.мментарий.
А с виду вроде нормальный человек. Сам-то хоть раз смешивал px и pt, Капитан Опытность ты наш? Да еще там, где они вообще не указываются.
 
Последнее редактирование:

С.

Продвинутый новичок
Нашел рекомендацию, что для мобильников лучше указывать размер шрифта не в px, а в em (особенно для экранов с высоким разрешением). Но хотя на сайте и так нет ни одного конкретного размера шрифта (все в %% от умолчания), выставил умалчиваемый стандарт в 1em. Ничего не изменилось – разные блоки в разном масштабе.

Попутно заметил, что адекватно увеличиваются только те блоки, в котором нет не единого позиционного элемента. Картинка или кнопка с float делает весь блок (включая обычный текст в нем) мелким до нечитаемости.
 

С.

Продвинутый новичок
Оказывается любые форматирующие атрибуты, даже не в самом блоке, а у его предка может повлиять на триггер масшатабирования текста. Например такой невинный как width:100%, надо переводить в дефолтный, чтобы текст стал читаемым.

Но еще остались кое-какие виды блоков, которые ну никак не хотят относительно масштабироваться, хоть уже все подозрительное оттуда вычищено. В одном месте заработало только после того, как у родителя убрали text-align:adjust.
 

WMix

герр M:)ller
Партнер клуба
CSS:
body {
  font-size: 16px; // устанавливаешь 1 раз стандартный размер @media зависимый
}

h1 {
  font-size: 140%; // и уже после, от него отталкиваешься
}
p {
  font-size: 100%;
}
и да, любой размер от родительского тега,
по этой причине не задавай font-size у div и table/td
 

fixxxer

К.О.
Партнер клуба
Начни с втыкания reset.css или normalize.css на самый на верх.
 

С.

Продвинутый новичок
Начни с втыкания reset.css или normalize.css на самый на верх.
Не понимаю, как это может помочь "на самом верху". Браузер и сам все сбрасывает для каждой страницы. Какая-то особая "стерилизация" не имеет смысла.

Я не могу себе позволить поддержку двух разных view. А отдельная "мобильная" ветка CSS (только для некоторых элементов) вполне приемлема.

Проблема оказалась в том, что для десктопа создать нужную верстку можно несколькими способами, но не все они по зубам мобильному адаптеру – показывает эти области, как есть в десктопном виде, но слишком мелко. Даже отдельные слова и фразы в общем потоке текста, если посчитает, что у них слишком сложное форматирование (inline-block).

Все переделать малой кровью не удастся, поэтому текстовые блоки адаптируются, а таблицы и схемы – как есть. Либо пусть зумят, либо пусть читают с десктопа. Я бы не стал париться, если бы статистика не показывала большую долю захода с мобильников.

Возвращаясь к заглавной теме о детектировании мобильника (адаптация вылезла попутно). Остановился на таком варианте:
Код:
@media only screen and (orientation: portrait), (max-width: 768px)
В ландскейпе и десктопная версия смотрится читабельно. Меня это вполне устраивает.

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

AnrDaemon

Продвинутый новичок
Сам-то хоть раз смешивал px и pt, Капитан Опытность ты наш? Да еще там, где они вообще не указываются.
Для тебя будет большим откровением, что без указания размерности браузеры поголовно предполагают px ?
Если хочешь нормальной вёрстки на мобильных, используй реальные величины (пункты, пики, дюймы, сантиметры) и/или относительную длину (%%, em/ex).
 

С.

Продвинутый новичок
Для тебя будет большим откровением, что без указания размерности браузеры поголовно предполагают px ?
Сайт изначально создавался адаптивным. Нигде нет конкретно размера текста, везде только относительный в %%.

Мобильный браузер (с продвинутой матрицей экрана) может использовать свои относительные единицы, разные для разных блоков текста, по своему усмотрению.

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

С.

Продвинутый новичок
Я вышел на атрибут "hasLayout". Хотя он только для IE, но судя по всему и WebKit тоже использует нечто подобное в своем коде для адаптации на мобильных экранах, но без интерфейса к нему.

Когда стили меняются (напр. от "inline-block" к "block") внутренний триггер не всегда сбрасывается и тогда этот элемент не проходит автоматическую адаптацию для мобильного экрана, а показывается как для десктопа (мелко).

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

С.

Продвинутый новичок
Нашел хак, но более-менее систематический.

Верстальщик использовал метод контекстного объединения – блок помещался в поименованный div.block, который сам не нес никакого стиля, а задавались стили его элементов: .block h3 {...}, .block p {...} и т.п. Претензий к такой верстке никаких, все работает идеально на десктопе.

Пришлось избавиться от объединительного блока div.block → h3.block {...}, p.block {...} поскольку он мешал адаптации к экрану мобильника, даже если стили его частей были изменены на адаптационные и никак не препятствовали ей. Какая-то проблема с пропагацией от родителя к наследникам.

Причем проблема не у одного меня, правда не в отношения адаптации к мобильникам, а при динамической верстке. Их хаки мне не подошли.
 
Сверху