Как сделать так, чтобы размер моего шрифта хорошо смотрелся на разных устройствах?Разное окно просмотра для iPad и iPhone в UIWebView

Question

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

Сейчас я делаю Scale to Fit = YES и у моего html есть метатег

<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>

но размер шрифта на iPad действительно слишком мал. Я попытался решить эту проблему, установив initial-scale = 2.0, но теперь он выглядит огромным на iPhone и даже на планшете galaxy.

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

Возможно, лучший вопрос: как я могу снова сделать текст переноса UIWebView после увеличения?

Answer 1

Я бы оставил масштаб равным 1,0, но увеличил бы размер текста, как только на больших экранах будет больше места.Это можно сделать с помощью медиа-запросов css:

@media screen and (min-width : 768px) {
    /* Styles, for example to increase font size */
    body { font-size: 120%; }
}

Это увеличит размер основного шрифта до 120% при отображении на устройстве с шириной экрана> 768 (ширина портрета iPad).Вы можете использовать несколько из этих правил для разной ширины.

W3 имеет официальную спецификацию Media Queries .