unterschiedliche Inhalte für ein mobiles Gerät als Desktop

Question

Ich baue eine Website und möchte ein Video zu liefern, wenn der Benutzer auf einem Desktop-Gerät ist, und wenn ich auf einem Handy werde ich ein gif zu dienen.

Hat jemand eine Anleitung für Best Practices zu diesem Thema?

Ist der unten stehende Code ausreichend? Wenn ich das auf Chrome teste, wird das Handy-GIF nicht angezeigt, aber vielleicht stimmt hier etwas nicht.

Sollte ich moderniszr verwenden, um Browser/Geräteinkonsistenzen abzudecken, die mir vielleicht nicht bekannt sind? Gibt es einen data-src Ansatz, den ich vielleicht nehmen sollte?

<div id="main"></div> 

<script type="text/javascript"> 

var main = document.getElementById('main'); 

//check if a mobile device 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    main.innerHTML = '<img src="http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif>"'; 
} 
else { 
    main.innerHTML = '<video width="640" height="360" controls="" autoplay=""><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"></video>'; 
} 
</script> 

Answer 1

Bitte nicht testen für ein Gerät, Test für eine Bildschirmgröße.

var windowWidth = $(window).width(); 
var maxDeviceWidth = 768; 
if (windowWidth > maxDeviceWidth) { 
    //Server the desktop version 
    //You can get the content with Ajax or load both and hide the other 
} else { 
    //Load the mobile content - either with Ajax, or hide the desktop content 
} 

Ich würde vorschlagen, dass Sie Inhalt nur mit Ajax basierend auf der Bildschirmbreite laden. Stellen Sie sicher, dass Sie auch diese in

$(window).resize(); 

setzen, um sicherzustellen, dass Sie Bildschirme seitwärts drehen.

Answer 2

Update: Ich habe dynamische Einfügung basierend auf der innerWidth enthalten, so sollte dies jetzt cool sein, es enthält ein Video auf großen Bildschirmen und ein GIF auf kleinen.

HTML:

<div class="wrapper"> 
    <div id="video-container"> 
     <video></video> 
    </div> 
    <div id="gif-container"> 
     <img src="gif.gif"> 
    </div> 
</div> 

CSS:

#video-container { 
    display: none; 
} 
#gif-container { 
    display: block; 
} 

// Mobile first = win! 
@media screen and (min-width: 40em) { 
    #video-container { 
     display: block; 
    } 
    #gif-container { 
     display: none; 
    } 
} 

JavaScript:

function videoOrImage() { 

    console.log('hit') 

    if(window.innerWidth > 800) { 
     document.getElementById('gif-container').innerHTML = '' 
     var container = document.getElementById('video-container') 
     container.innerHTML = '<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>' 

    } 
    else { 
     document.getElementById('video-container').innerHTML = '' 
     var container = document.getElementById('gif-container') 
     container.innerHTML = '<img src="https://placehold.it/200">'; 
    } 

} 

window.onresize = videoOrImage();