Комментарии 51
еще на некоторых мобилках получалась такая ситуация, что если css отдельно, то сначала загружалась страничка без форматирования и через несколько секунд она уже форматировалась исходя из подгруженного css. Особенно это напрягало в чатах и т.п.
Если css прописан в хедере, то таких неприятностей не происходило.
Если css прописан в хедере, то таких неприятностей не происходило.
Выравнивать по центру и давать максимальную ширину для body я считаю дурным тоном, во-первых из-за того, что на мобильную версию пользователь с ПК попадать не должен, а во-вторых, представьте как будет такое выглядеть такой сайт на четвертом айфоне при повороте с портретной в альбомную ориентацию.
Отличный пост. Спасибо.
Буду ждать продолжения…
Вопрос тут возник про использование параметра target со значением "_blank". Нужно/не нужно? или это прошлый век?
Буду ждать продолжения…
Вопрос тут возник про использование параметра target со значением "_blank". Нужно/не нужно? или это прошлый век?
«CSS внутри страницы вставляют для того, чтобы как можно меньше было новых соединений. Потому что на создание соединения тратится больше времени, чем на отрисовку страницы.»
эта причина в общем то вялая
при нормальных настройках кеширования, задержка с отрисовкой произойдет только 1 раз, далее css берется из кеша
со старыми Нокиями действительно факт, та же ерунда была с несколькими моделями Сименсов
и есть еще один аспект, который в статье не упомянут
CSS2 может поддерживаться не полностью.
Сталкивался с ситуацией когда не работает наследование .style1 a
для
а вот применение стиля напрямую созданием отдельного класса работает всегда или прописывание через style
поэтому лучше избегать «сложных» правил
эта причина в общем то вялая
при нормальных настройках кеширования, задержка с отрисовкой произойдет только 1 раз, далее css берется из кеша
со старыми Нокиями действительно факт, та же ерунда была с несколькими моделями Сименсов
и есть еще один аспект, который в статье не упомянут
CSS2 может поддерживаться не полностью.
Сталкивался с ситуацией когда не работает наследование .style1 a
для
<div class="style1"><a href="?">ccылка</a>
а вот применение стиля напрямую созданием отдельного класса работает всегда или прописывание через style
<div><a href="?" class="style2">ccылка</a>
поэтому лучше избегать «сложных» правил
хм… парсер сожрал закрывающий див
На счет цитаты: я придерживаюсь своего мнения, но версия, которую мне кинули в аську, тоже имеет право на жизнь
На счет наследования вы правы, бывает такое, что оно не работает (но очень редко)
На счет наследования вы правы, бывает такое, что оно не работает (но очень редко)
поглядел на ваш сайт и вспомнил про еще одно
инпуты, чекбоксы и прочие элементы форм, на старых телефонах очень плохо поддаются стилизации, поскольку нередко отрисовываются не средствами броузера а, средствами ОС
к такому примеру у меня сразу 3 нотиса
1. наследование
2. бордер у инпута
3. использование псевдокласса
.auth input.exit:hover {background: #ffd9d9;
border: 1px solid #e1abab;
color: #a76666;
}инпуты, чекбоксы и прочие элементы форм, на старых телефонах очень плохо поддаются стилизации, поскольку нередко отрисовываются не средствами броузера а, средствами ОС
к такому примеру у меня сразу 3 нотиса
1. наследование
2. бордер у инпута
3. использование псевдокласса
Подскажите, как можно под linux протестировать то, как сайт будет отображаться на мобильных устройствах с разрешением 128x160?
есть куча эмуляторов
ищите под конкретный телефон
а вообще не так много телефонов с таким разрешением осталось
ищите под конкретный телефон
а вообще не так много телефонов с таким разрешением осталось
Уменьшить окно браузер до такой ширины :)
А в действительности — только на телефоне. Ибо даже эмуляторы (а их можно далеко не всегда найти) не рендерят страницу так же, как реальный девайс.
А в действительности — только на телефоне. Ибо даже эмуляторы (а их можно далеко не всегда найти) не рендерят страницу так же, как реальный девайс.
Поменять настройки window manager, чтобы он фиксировал геометрию окна браузера.
логотип должен быть до 120 пикселей шириной
а использовать разные логотипы под разные разрешения не судьба? :)
Когда на мобильную версию зайдет кто-нибудь с Nokia 5800 (например), то этот логотип будет выглядеть убого. Что уж говорить про 480px экраны.
А есть ли смысл делать сайты под такие старые телефоны/браузеры? Их владельцы не заходят часто в интернет. А те кто постоянно в сети выбирают соответствующие телефоны.
Думаю вы уже поняли, как это будет отображаться.
ИМХО, лучше от подобных фраз избавляться. Далеко не все читатели Хабра профессионалы в телепатии. Если какие-то вещи Вам кажутся очевидными, то для многих это не так. Пишите пояснения plz, это пойдет только на пользу.
Старайтесь не трогать свойства input в css, а если надо — делайте с умом (с параметром type=text, например, а то делают красивое поле ввода, а чекбоксы, радиобаттоны смотрятся ужасно)
Почему же? Тестировал со стареньких трубок. И чекбоксы и радиобаттоны и поля ввода смотрятся отлично.
Напишите лучше про мини оперу (
>Вы заметили в шапке слово XHTML? Это значит что надо строго следовать правилам разметки этого языка, иначе последствия будут печальными.
Невалидные сайты неправильно отображаются? Да это же мечта верстальщика! Если бы только еще не было остальных правил нестандартных а-ля «все должно быть в div».
Будем надеяться, что и в десктопных браузерах до этого когда-нибудь дойдут.
Невалидные сайты неправильно отображаются? Да это же мечта верстальщика! Если бы только еще не было остальных правил нестандартных а-ля «все должно быть в div».
Будем надеяться, что и в десктопных браузерах до этого когда-нибудь дойдут.
Когда был стандарт WML, любая ошибка (даже не закрытый тег
) не позволяла отображать страницу. XHTML все отображает, но ругается валидатор не зря. Есть версии браузеров, которые отреагируют на эту ошибку и страница не откроется.
Я веду к тому, что от этого уже уходят, но еще не ушли и надо это помнить
) не позволяла отображать страницу. XHTML все отображает, но ругается валидатор не зря. Есть версии браузеров, которые отреагируют на эту ошибку и страница не откроется.
Я веду к тому, что от этого уже уходят, но еще не ушли и надо это помнить
xhtml, переданный как «text/html» — не xhtml. Вы передайте его как положено, то бишь как «application/xhtml+xml» и увидите «желтый экран смерти» в Firefox (не знаю, как в других браузерах это обзывается) при незакрытом теге, теге с заглавными буквами и т.п. Большинство нынешних сайтов косят под xhtml, но им не являются, ибо «application/xhtml+xml» ie только с 9-ой версии понимать обучится. Так что выше утверждение скорее ложно, нежели истинно.
CSS внутри страницы пишут для того, что на части телефонов при указание CSS отдельным фаилом происходит сначала загрузка данных страницы, потом телефон тянет css и еще раз перерисовывает страницу. То есть пользователь в течении пары секунд видит страницу без CSS
очень сложно в написании статей такого рода избегать слов «дебилизм» или «какашка»?
О, напишу-ка я несколько веселых моментов с телефонами. Правда они более или менее археологичны, новые телефоны с приличными браузерами уже идут.
И да про css отдельным файлом правдивы обе версии, некоторые нокии действительно не умеют грузить css отдельным файлом и при не очень хорошей связи css отдельным файлом будет грузиться 3-5 секунд ибо запросы долго идут.
- Моторолы не дружат с жирным шрифтом. Совсем старые моторолки просто закрывали браузер если встречали болд (как тегами, так и css).
- Одна из моделей нокий не понимала если цвет шрифта задавался как белый или как черный. Настройки для цвета брались из самого браузера, поэтому возникала ситуация что не темном фоне был черный шрифт. Лечится это указанием цвета как #FEFEFE, например.
- Возникают проблемы если у фоновой картинки задавать положение bottom, некоторые телефоны их радостно игнорируют.
- Опять же в нокиях странно работает наследование стилей. Работают более или менее стабильно простые правила, например, .div a {}, a {}, или прописывание у элемента конкретного класса. Либо css правила с указанием полного пути, на какое-то наследование более сложное надеяться не стоит
- Обтекание картинок с любой из сторон с помощью float, работает далеко не везде. Гораздо стабильнее работает align, хоть он и не валиден.
- Хитрость вроде <br style=«clear:both» /> плохо работает, <div style=«clear:both»> </div> работает гораздо лучше.
- Штуки вроде не воспринимаются многим, испльзовать стоит т.е. цифровые коды или как там их правильно называть
И да про css отдельным файлом правдивы обе версии, некоторые нокии действительно не умеют грузить css отдельным файлом и при не очень хорошей связи css отдельным файлом будет грузиться 3-5 секунд ибо запросы долго идут.
Особенно круто смотрится в опере мини сайт «пипец» (люблю читать в дороге).
Я даже не представляю КАК надо верстать, чтобы такая бага появлалась!
Суть баги, кстати, в том, что «пипцы» совершенно случайным образом выравниваются по правому краю колонки и занимают в ширину не больше 50 пикселей, т.е. их не прочтёшь. Вообще впервые такое вижу.
Я даже не представляю КАК надо верстать, чтобы такая бага появлалась!
Суть баги, кстати, в том, что «пипцы» совершенно случайным образом выравниваются по правому краю колонки и занимают в ширину не больше 50 пикселей, т.е. их не прочтёшь. Вообще впервые такое вижу.
полезная статья
и главное во время: скоро буду делать мобильный портал
и главное во время: скоро буду делать мобильный портал
Извините, меня одного раздражает замена слова «процент» на символ "%"? Лично я, наткнувшись на символическое обозначение в тексте, начинаю искать рядом с ним число.
> телефоны без ОС
oO
oO
История мобильного телефона не началась с iPhone. Историю надо знать :)
Хорошо, приведите мне пожалуйста в пример какой-нибудь телефон, у которого есть браузер и нет ОС ;)
Кликабельно
Не идите на поводу у маркетологов. У современных телефонов не может не быть ОС. Пусть она закрыта по максимуму и сделать с ней ничего нельзя, но она есть. Иначе как работать с железом, как обеспечивать пусть даже примитивную, но многозадачность, на чем вообще запускать приложения (тот же браузер) и пользовательское окружение?
Вы правы, я пропустил одну очень важную строчку (исправил)
Спасибо! Статья намного более приближена к реальности (чем например вот эта: habrahabr.ru/blogs/mobiledev/107764/) и видно что за ней стоит опыт разработки под реально существующие телефоны и браузеры. Ну и основные грабли хорошо описаны, не только в статье но и в комментариях.
Было бы интересно почитать про специфику Opera Mini.
Было бы интересно почитать про специфику Opera Mini.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Особенности дизайна сайта для мобильных устройств