Question

Добрый день.

Помогите разобраться. Не срабатывает проверка мобилка/десктоп. Суть задачи подменять или менять размер картинке при открытии сайта с моб.устройства.

<?if($USER_AGENT_PDA$)?><img style="width:300" src="$IMG_URL1$" /><?else?><img src="$IMG_URL1$" /><?endif?>

Ширина оригинаольной картинки больше. И при открытии в мобильных браузерах ломается стиль сайта.

Проверялось на Android - всё вписывается и без специальных преобразований. А вот платформы на Windows Phone не преобразовуют картинку подширену экрана атоматически.

Answer 1

Наведу пример как это реализуется без условий, а с помощью стилей(проще говоря это называется адаптивность):

<div class="adapt"><img src="ссылка на изображение" alt=""></div>

Данные стили помещаем в таблицу стилей CSS

.adapt img {width:auto;max-width:100%;}

Вот небольшой пример как подобная реализация работает - демо. Более детально о том как работает - max-width, ознакомьтесь с материалом - http://htmlbook.ru/css/max-width

 

Comments

Спасибо за ответ, но он не решает проблему. Если вы обратили внимание на дизайн установленный на указанном сайте. То в дизайне #1075 уже прописано в СSS

.eMessage img,
.cMessage img {
 max-width: 100%;
 height: auto;
 width: auto;
}

Но это не меняет того факта что в браузерах работающих под управлением Windows Phone эти стили игнорируются. Есть возможность решить эту проблему проверяя является ли юзерагент мобилкой и подставлять ему необходимы стиль или картинку или текс. И как раз эта проверка не отрабатывает. Возможно не работает системная-переменная, возможно есть проблемы именно с разпарсиванием HTML браузерами в Windows Phone или ещё что-то менее заметное.

---

Вы говорите не срабатывает проверка переменной, перейдите в Панель управления - Управление дизайном - Верхняя часть сайта, далее установите в самый верх переменную - $USER_AGENT_PDA$ сохраните, после зайдите с мобильного устройства и сообщите, что вы видите.

Если мобильная версия – 1, если компьютер  – пустота.