Браузер Opera Mini нередко отключает различные графические элементы веб-сайтов в целях экономии трафика. В результате пользователь может получить на телефоне малопонятные данные, слабо напоминающие оригинальную страницу. Для примера можно посмотреть, насколько различным может быть отображение одного и того же ресурса на персональном компьютере (рис. 1) и на экране Opera Mini (рис. 2).
Рис. 1
Рис. 2
Происходит это от того, что мобильный браузер не пропустил на дисплей фоновый рисунок заголовка страницы. Впрочем, у веб-мастеров есть довольно простой способ обойти данное ограничение и постараться максимально соблюсти исходный дизайн веб-сайта на мобильном устройстве. Для этого нужно в таблицах стилей сайта внести небольшие изменения.
Иногда стили заголовка страницы содержат подобные строки:
#header{
background-image: url({site_url}themes/site_themes/orange/header.png);
background-repeat: repeat-x;
}
Всё, что нам требуется - просто добавить в заголовок фоновый цвет, соответствующий по цвету рисунку, используемому в качестве заголовка сайта.
#header{
background-image: url({site_url}themes/site_themes/orange/header.png);
background-repeat: repeat-x;
background-color:#000000;
}
В результате при отображении веб-сайта с помощью Opera Mini фоновый цвет возьмёт на себя роль рисунка. (Заметим, что есть более краткая запись, использующая свойство background).
Примечательно, что благодаря этому способу сайт будет выглядеть лучше и в обычном "настольном" браузере, если пользователь отключит отображение картинок.
Таким же способом можно "подсветить" и другие элементы сайта, которые теряются при отображении в Opera Mini.
версия для печати
другие статьи автора
оставить комментарий (0) 
