Отображение различного изображения на различных устройствах

Question

Я использую Joomla 3.3.4 FYI.

У меня есть изображение на первой странице (http://www.ckdev.info/cdp), это призыв к действию, чтобы заполнить форму для бесплатной оценки. Это замечательно на рабочем столе или планшете (пейзаж), поскольку форма отображается справа.

Однако, если смотреть на других устройствах или ориентациях, окно просмотра слишком мало, чтобы боковая панель показывалась справа, и она опускалась на дно. Таким образом, изображение «правой стрелки» не имеет логического смысла.

Что я хочу сделать, это немного "if-else" решение. Если ширина экрана равна xx px или выше, покажите «right-arrow.jpg», иначе «down-arrow.jpg». Я добавлю привязку к форме, чтобы при щелчке/касании вниз-стрелка.jpg при отображении прокручивалась вниз до формы.

Боюсь, что я не кодер, поэтому, я не сомневаюсь, что это можно сделать, я понятия не имею! Благодарю.

Answer 1

Для изменения отображаемого изображения требуется мультимедийный запрос CSS.

Для смартфона, как на Iphone в Portait было бы что-то подобное:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)  

{/ * СТИЛИ GO ЗДЕСЬ * /}

Для получения более подробной информации смотрите на:

w3schools

cssmediaqueries

Answer 2

Вы можете сделать это с помощью css-медиа-запросов.

Попробуйте это: (изменение 900px и 899px для получения требуемых значений)

@media(min-width: 900px) { 
    #img { 
     width: 100%; 
     height: 150px; 
     background: url('http://www.ckdev.info/cdp/images/estimate.png'); 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center; 
    } 
} 

@media(max-width: 899px) { 
    #img { 
     width: 100%; 
     height: 100px; 
     background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/ 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center;   
    } 
} 

Проверьте это здесь: jsFiddle (размер ширины окна результат более чем 900px)

Я только что сделал ваш изображение разного размера по разным медиа-запросам, но вместо этого измените свой фоновый url на желаемое изображение.

Answer 3

Вы можете сделать это с помощью jQuery без каких-либо дополнительных действий, пока вы не возражаете против некоторых странностей в ширине окна, которое поступает из полосы прокрутки. Я вернусь на полосу прокрутки за секунду. Чтобы проверить ширину, вы можете использовать jQuery(window).width(). Это вернет ширину окна в пикселях. Именно то, что вы ищете. Пример фрагмента:

jQuery(document).ready(function(){ 
    if (jQuery(window).width() > 1000){ 
    jQuery(<select img here>).attr('src', '/path/to/new/image.jpg'); 
    } 
}); 

Я заметил, что у вас нет класса или идентификатора упомянутого вами изображения. Я бы предложил добавить идентификатор, чтобы упростить выбор. Например, <img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">. Если вы внесете это изменение, вы можете поменять <select img here> на 'img#estimate-with-arrow' (это позволит выбрать изображение с оценкой id со стрелкой). И вуаля, обмен изображения.

Отмечу три вещи. Во-первых, это будет работать только при начальной загрузке страницы. Если пользователь загружает страницу с полной шириной рабочего стола, а затем сжимает ее, изображение не изменяется при прохождении точки останова.Вы должны связать с изменением размера, чтобы получить эту работу:

jQuery(window).resize(function() { 
    <code here> 
}); 

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

И, в-третьих, полоса прокрутки. Тестирование ширины окна с помощью jQuery не будет совпадать с той же точкой останова, что и css. Я использую modernizr, чтобы обойти это. Это немного более продвинуто, хотя.