Вёрстка, CSS, Windows Mobile 5.0. Размер шрифта в IE и Opera Mobile

CSS*

Корплю над стилями PDA-версии некоего весёлого сайта. Вижу, что IE Win Mobile и Opera Mobile имеют различия в отображении одного и того же кода:

body {
font: 100% Verdana, Arial,sans-serif;
color: #000;
background: #fff;
}

Шрифт в Opera Mobile выглядит 2 раза крупнее, нежели в IE. Оба браузера с настройками по умолчанию. Под катом рабочее решение. Не наступайте на грабли, друзья.

Фильтрую очень просто:

/* opera mobile */
html > body {
font-size: 50%;
}

Поскольку Opera Mobile понимает этот синтаксис, то у всех тегов body уменьшает размер шрифта наполовину.

Кстати, запись вида
body[class] {
font-size: 50%;
}
в качестве фильтра не подходит — IE вполне себе понимает :-)

+18

25 июля 2007, 21:32

rossomachin 89,6

комментарии (38)

Vox 25 июля 2007, 21:56 #

Я перестал использовать мобильную оперу. Она почему то не даёт отступа справа и крайние символы пропадают частично. Кстати есть и ещё один браузер - NetFront

rossomachin 25 июля 2007, 22:04 # ↑

Баг как-то удавалось локализовать, или это повсеместно?

Vox 25 июля 2007, 22:10 # ↑

Повсеместно. Меня сильно стал раздражать и я перешёл на карманный IE ибо NetFront конечно хорошая для КПК штука, но я не понимаю на какие машинки он рассчитан ибо на Dell x51v тормозит, а мощнее его нет машинок.

rossomachin 25 июля 2007, 22:11 # ↑

NetFront чуть-чуть пробовал в деле, но к себе ставить не стал в силу тех же причин.

Vox 25 июля 2007, 22:15 # ↑

В NetFront есть ява скрипты и он позволяет забраться почти на любые страницы. Говорят, что в следующей версии будет поддержка Web 2.0 Но я не очень понимаю как этот монстр будет работать. Сейчас полно КПК на 200 МГц процессорах. Там он наверно даже не запустится. В общем это просто альтернативный вариант, такой же как мини опера.

Zerkella 26 июля 2007, 02:39 # ↑

Интересно, что такое поддержка браузером Web 2.0?
O_O

Vox 26 июля 2007, 07:55 # ↑

Это значит, что он ещё подробнее будет поддерживать java скрипты, в том числе ajax.

shergin 26 июля 2007, 11:13 # ↑

Веб 2.0 это больше чем "скприпты" и "аякс". И между прочим мобильная опера это все умеет поддерживать не меньше года. У нее рендеринг на кпк вообще не отличается от рендеренга на большом брате.

Zerkella 26 июля 2007, 11:29 # ↑

если мобильная опера на том же движке, что и старший брат, то с буковкой A в слове "аякс" у нее большие проблемы

shergin 26 июля 2007, 12:11 # ↑

Какие именно у нее проблемы?

Zerkella 26 июля 2007, 12:15 # ↑

см. выше - с буковкой А :P

shergin 26 июля 2007, 13:11 # ↑

Тоесть он у нее не асинхронный?!

Zerkella 26 июля 2007, 17:34 # ↑

один из методов - точно не асинхронный

Zerkella 26 июля 2007, 17:35 # ↑

второй подозреваю тоже

shergin 27 июля 2007, 18:04 # ↑

Пожалуйста, давайте будем конкретнее. Я не один год разрабатываю очень сложные кросс-браузерные клиентские веб-приложения.
К Опере у меня претензий практически нет. При этом, все что работает на десктопе, работает и на КПК.
Зато к IE очень много, на отладку скриптов (и обход явных ошибок) под него действительно уходит больше всего времени.

Zerkella 29 июля 2007, 16:24 # ↑

мнение насчет оперы не разделяю. у всех браузеров свои приколы.
в данном случае конкретно имею в виду, что после создания тега SCRIPT,установки его src и включения в DOM-структуру опера делает СИНХРОННЫЙ запрос, на время которого останавливает выполнение основного скрипта

shergin 30 июля 2007, 12:25 # ↑

Спасибо, очень конкретно и дельно.
Действительно это так, но это не имеет особо отношения к т.н. ajax, подобная функциональность прямо не описана в стандарте и там синхронность\асинхронность данной процедуры не указана. Я могу себе представить аргументы удобства в соответствии с которыми разработчики Оперы реализовали эту фичу именно так. Если же Вы хотите, чтоб Опера вела себя иначе, я думаю это можно реализовать\обойти через xmlhttprequest.
По Вашему мнению это самый страшный баг оперы?

Zerkella 30 июля 2007, 12:56 # ↑

А черт его знает! Каждый баг страшен в своем контексте :)

rossomachin 25 июля 2007, 22:10 # ↑

Присмотрелся сейчас к тому, что показывает Opera на моём КПК — действительно нет правого отступа.

Vox 25 июля 2007, 22:12 # ↑

Как только я не крутил эту оперу, но так и не нашёл решения кроме смены браузера. А так она мне нравится.

rossomachin 25 июля 2007, 22:33 # ↑

Я люблю десктопный вариант, а этот как-то не прижился. Субъектвино мне удобней скролить джойстиком наладонника в IE, а не в Opera — перелистывает сразу весь экран, а не половинку.

CurlyBrace 25 июля 2007, 23:21 #

Макс, а тема с обнулением стилей (css reset) в КПК не актуальна?

Я с версткой для кпк дела почти не имел, но по логике можно же задать для body font-size: 62.5%, a для текстовых блоков уже по желанию.

rossomachin 26 июля 2007, 10:28 # ↑

Макс, а тема с обнулением стилей (css reset) в КПК не актуальна?

«Ластикº стоит первой строкой в начале моего CSS-файла :-)

но по логике можно же задать для body font-size: 62.5%, a для текстовых блоков уже по желанию.

Можно, но мне от 100% удобней плясать. Так уж исторически сложилось.

CurlyBrace 26 июля 2007, 10:32 # ↑

Вопросов больше не имею :)

rossomachin 26 июля 2007, 10:32 # ↑

Вообще 62,5% это же 10px от дефолтных 16-ти, справедливо для больших браузеров. В кпк-версиях я не берусь сказать, какой кегль принять по умолчанию — вот откуда именно 100%.

CurlyBrace 26 июля 2007, 10:32 # ↑

а если в "em"?

rossomachin 26 июля 2007, 11:11 # ↑

Можно и в em.

investor 26 июля 2007, 01:57 #

ie+spb pocket+ )
хотя в большей части юзаю opera. Все же это пда а не комп! Не стоит забывать это!

restyler 26 июля 2007, 03:13 # ↑

это вы сейчас так говорите.. а через пару лет заказчеки все как один будут требовать тестирование в и ie для кпк и opera mobile )

investor 26 июля 2007, 03:15 # ↑

с этим я не спорю ) Я просто говорю про возможности PDA сегодня а не про iPhonы завтра )

trinko 26 июля 2007, 09:16 #

а я не верю что mozilla упустит такой растущий рынок, как PDA. А еще я уверен что FF будет вообще по дргому отображать PDA версии сайтов, нежели IE и Opera.
Короче говоря, дорогие коллеги верстальщики, счастье близко =) Новые хаки, новые приемы, новые возомжности =) Гемору, конечно, прибавится, но жить будет приятней =)

theifish 26 июля 2007, 09:58 # ↑

а Мозила и не упускает: http://www.mozilla.org/projects/minimo/
правда ставил я это чудо на свой старенький Ipaq 2110 - тормозит, весит много, вобщем неюзабельно еще.

shergin 26 июля 2007, 11:14 #

Имхо, в том что CSS-хаки работают и на КПК нет ничего удивительного.

rossomachin 26 июля 2007, 12:42 # ↑

В приведённых мной фрагментах CSS-кода нет ни одного CSS-хака. Не путайте хаки с фильтрами для выборки браузеров.

MTonly 26 июля 2007, 14:14 # ↑

фильтр = валидный хак ;-)

Constantine 26 июля 2007, 21:49 #

А на скольких покетах проверялось это решение? Откуда уверенность, что оно будет одинаково работать на всех покетах? AFAIK на разных покетах разные настройки размера шрифта по-умолчанию в IE.

rossomachin 27 июля 2007, 08:54 # ↑

Если внимательно вчитаетесь в код, то увидите, что он написан не для решения проблем с IE, а для фильтрации Opera Mobile. В IE шрифт будет таким, каким он принят по умолчанию — ибо font-size: 100%;

tapazukk 19 февраля 2008, 20:47 #

Тоже думал решать так проблему, но есть пара моментов.
1-Опера Мини, кушает хак+Опера Мобайл под симбиан
2-Почему то при переходе в landscape шрифт становился нормального размера.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.