CSS: размер шрифта, физическая высота кнопок для широкого спектра мобильных устройств

Question

CSS: размер шрифта, физическая высота кнопок для широкого спектра мобильных устройств

1

Я работаю над веб-приложением, которое запускается на iPhone и различных телефонах Android. Я использовал инфраструктуру iUI. iUI был разработан для iPhone 3 и использует пиксели в CSS для размера шрифта, высоты строки и т.д. Но результат непригоден для нового Samsung I5500 с высокой плотностью пикселей (240 x 320 пикселей, 2,8 дюйма = 143dpi). Все элементы слишком малы. Это можно частично компенсировать в настройках браузерa > масштабирование > закрыть, но мне не нравится, когда пользователи меняют настройки своего браузера.

Моя цель состоит в том, что каждая ссылка и каждая кнопка могут быть удобно использованы, касаясь ее. Для этого я хотел бы обеспечить минимальный физический размер элемента. К счастью, спецификация CSS 2.1 предоставляет для этого способ: min-height: 20mm или min-height: 0.8in. К несчастью, каждый телефон, который я игнорировал эту декларацию. На iPhone 3GS элемент имеет размер 11 мм, на Samsung I5500 (Andorid 2.1) - 10 мм, на HTC Wildfire с дисплеем с низким разрешением (Android 2.2) он имеет размер 14 мм. Похоже, браузер WebKit предполагает небольшое разрешение, подобное 96dpi, что делает элементы едва читаемыми и едва доступными для мобильных телефонов с высоким разрешением.

Это сообщение в блоге sencha предоставляет некоторые решения, рекомендующие устанавливать все размеры для кнопок, ссылок, элементов списка в em и смещения размера для body один раз с помощью какого-то браузера, нюхающего.

Они также упоминают медиа-запросы CSS3, но говорят, что в настоящее время он не работает:

@media screen and (min-resolution: 160dpi) {
    body {
      font-size: 114%;
    }
}

Для Android

<meta name="viewport" content="target-densitydpi=low-dpi" />

похоже, помогает. Он увеличивает страницу на устройствах с высоким разрешением на дюйм больше, чем на устройствах с низким разрешением. Но физический размер элементов по-прежнему отличается. См. Также Android WebView.

Документация Android DisplayMetrics с ее плотностью против scaledDensity приносит больше нечеткости, чем пояснение.

Итак, лучшая комбинация, которую я нашел до сих пор для iPhone и Android, - это iUI плюс следующая декларация в HTML-заголовке:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;target-densitydpi=low-dpi;"/>

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

Или какое обходное решение вы используете?

geekQ 06 апр. 2011, в 10:42

Источник

Теги:

android

css

webkit

1 ответ

Ещё вопросы

Yahel · Answer 1 · 2011-04-06T07-22-00.000Z

Я думаю, что ответ для вас - это использование блока EM вместо пиксельного блока.

http://www.w3.org/WAI/GL/css2em.htm

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

Это лучшая практика веб-мастеров для доступности в любом случае и почему большинство фреймов являются злыми!: D

Хотя мне нравится идея косвенности, добавляемая модулем em, она не отвечает на мой вопрос. Шрифт по умолчанию сильно варьируется от мобильного устройства к мобильному устройству, и это зависит от того, что делает элементы пользовательского интерфейса слишком маленькими, чтобы их касаться, или слишком большими (не умещается на дисплее). Для меня «доступность» означает, что моим приложением могут управлять женщины с длинными ногтями ;-), а не 20-летняя концепция доступности спецификаций w3c, учитывающая только слабовидящих пользователей.