удаление/обмен содержимым html с помощью медиа-запросов?

Question

Поскольку видео-фоны обычно не воспроизводятся автоматически на ручных устройствах, я хотел бы удалить видео и заменить его на изображение bg в зависимости от размера экрана.

Каков наилучший способ достичь этого? Возможно ли это с медиа-запросами? :)

Answer 1

Лучший способ ИМО - определить, поступает ли пользователь с мобильного устройства или стандартного устройства с помощью своего User Agent, а затем отображать фоновое изображение на стандартных устройствах и отображать фоновое изображение на мобильных устройствах.

В зависимости от языка, который вы используете для сайта, обнаружение мобильного устройства с использованием пользовательского агента относительно просто.

Answer 2

Фактически у вас есть изображение, установленное на тег видео на HTML, поэтому, если видео не поддерживается, оно отображает изображение. Обычно это самый простой способ загрузки изображения, когда вы находитесь на мобильном телефоне, вместо того, чтобы иметь отдельную веб-страницу для мобильных устройств. Вы можете прочитать больше о том, как сделать это здесь: http://www.html5rocks.com/en/tutorials/video/basics/

Answer 3

Для того, чтобы иметь другую часть кода для выполнения в зависимости от устройства пользователь смотрит ваш сайт с, я предлагаю вам использовать @media queries.

Ориентация смартфоны:

Не все смартфоны имеют одинаковый размер, но, как правило использования большого пальца руки:

@media screen and (device-width: 360px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 3) { 
    .imageelement { 
     /* Your css code*/ 
     display: block !important; 
    } 
    .videoelement { 
     /* Your css code*/ 
     display: none !important; 
    } 

}

Ориентация таблетки:

При таргетинге таблеток вы должны сохранять размеры в этом диапазоне:

@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .imageelement { 
     /* Your css code*/ 
     display: block !important; 
    } 
    .videoelement { 
     /* Your css code*/ 
     display: none !important; 
    } 
} 

таргетирования ноутбуков и больше устройств:

Наконец, это, где вы хотите поместить ваше видео появляться.

@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .imageelement { 
     /* Your css code*/ 
     display: none !important; 
    } 
    .videoelement { 
     /* Your css code*/ 
     display: block !important; 
    } 

}

Если вы хотите узнать больше о @media queries визит this page.