Я работаю над веб-приложением, которое работает на iPhone и различных телефонах Android.Я использовал IUI Framework до сих пор.iUI был разработан для iPhone 3 и использует пиксели в CSS для размера шрифта, высоты строки и т. д. Но результат не подходит для нового Samsung I5500 с высокой плотностью пикселей (240 x 320 пикселей, 2,8 дюйма = 143 точек на дюйм).Все элементы слишком малы.Это может быть частично компенсировано в настройках браузера> масштабирование> закрыть, но мне не нравится заставлять пользователей изменять настройки браузера.
Моя цель в том, чтобы каждая ссылка и каждая кнопка могли удобно использоваться при прикосновении к ней.Для этого я хотел бы обеспечить минимальный физический размер элемента.К счастью, спецификация 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 предполагает некоторое низкое разрешение, например 96 точек на дюйм, что делает элементы трудно читаемыми и едва активируемыми на дисплеях мобильных телефонов с высоким разрешением.размеры кнопок, ссылок, элементов списка в 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;"/>
Существует ли современный элегантный способ задания размера шрифта, а также ширины и высоты кнопок для широкого диапазона мобильных устройств?
Или какой обходной путь подойдетвы используете?