Замена картинки средствами CSS

[gullson]

Задача: требуется выводить один статичный баннер для десктопа и другой для мобильника.

Давать браузеру скачивать нужно только одну картинку, поэтому display:none не подходит.
В html желательно обойтись только img, либо минимальной допразметкой уровня дивов/спанов.
Размеры и пропорции картинок разные, поэтому нужно ресайзить под img { max-width: 100%; }.
Работоспособность критична только для хрома и лисы.

HTML: <img id="banner" alt="banner" src="/images/banner.jpg">
CSS: #banner:before { content: url(url); }

Такой способ не работает в лисе

Примечание: десктопные и мобильные UA обслуживаются разными CSS.

 

[Vishez]

Задача: требуется выводить один статичный баннер для десктопа и другой для мобильника.

Давать браузеру скачивать нужно только одну картинку, поэтому display:none не подходит.
В html желательно обойтись только img, либо минимальной допразметкой уровня дивов/спанов.
Размеры и пропорции картинок разные, поэтому нужно ресайзить под img { max-width: 100%; }.
Работоспособность критична только для хрома и лисы.

HTML: <img id="banner" alt="banner" src="/images/banner.jpg">
CSS: #banner:before { content: url(url); }

Такой способ не работает в лисе

Примечание: десктопные и мобильные UA обслуживаются разными CSS.

Можно сделать через фон дива. Пример тут Для просмотра ссылки Войди или Зарегистрируйся.
Также можно использовать min-device-width и прочее, справку смотрите тут Для просмотра ссылки Войди или Зарегистрируйся

 

[gullson]

Можно сделать через фон дива. Пример тут Для просмотра ссылки Войди или Зарегистрируйся.
Также можно использовать min-device-width и прочее, справку смотрите тут Для просмотра ссылки Войди или Зарегистрируйся

Спасибо, с media сталкивался поверхностно, поэтому такой вопрос:

Надежно ли использовать типы устройств или лучше указывать разрешение в пикселях типа @media screen and (max-width: 45em)?
Тип handheld закроет все устройства, включая планшеты и раритет типа симбиана и series40, или только относительно свежие мобилы?

А первый способ не подходит, потому что там размеры картинок жестко прописаны.
Вообще вся эта кутерьма с заменой затевается только для уменьшения веса странички для мобил, у которых не только разрешения, но pixel-ratio часто совсем разные.

 

[Vishez]

Спасибо, с media сталкивался поверхностно, поэтому такой вопрос:

Надежно ли использовать типы устройств или лучше указывать разрешение в пикселях типа @media screen and (max-width: 45em)?
Тип handheld закроет все устройства, включая планшеты и раритет типа симбиана и series40, или только относительно свежие мобилы?

А первый способ не подходит, потому что там размеры картинок жестко прописаны.
Вообще вся эта кутерьма с заменой затевается только для уменьшения веса странички для мобил, у которых не только разрешения, но pixel-ratio часто совсем разные.

Честно говоря, не знаю насколько надежно использовать типы устройств, это надо тестировать на разных устройствах. Handheld как раз и включает в себя планшеты и мобильные устройства, но думаю не лишним будет указать и ширину экрана устройства на всякий случай.

 

[kastiel]

Не пробовал через php вывод делать? Там больше возможностей прописать можно (возможность скрыть closed)

 

[gullson]

Не пробовал через php вывод делать? Там больше возможностей прописать можно (возможность скрыть closed)

Хорошая идея, сам пока додумался только до заголовков, как еще можно определять? Не понял про closed, поясни пож-та.

<?php


//определяем мобильники
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");


if( $iPhone || $iPad || $Android || $webOS ){

echo '<img src="mobile.jpg" />';

}else if(){

echo '<img src="desktop.jpg" />';

}

?>

Есть подозрение, что таким способом далеко не все будет правильно определяться, например, какой-нибудь application built-in viewer.