检测浏览器宽度并防止下载页面段

Question

I intend to use html5 video header for my web page. I'm using Codeignitor(PHP) on the server and bootstrap and jquery on client side. video header is nice and effective on larger screens sizes. but it takes a considerable time to load on mobile browsers on lower download speeds. so that I want to prevent following code portion from downloading or executing (not to hide the downloaded elements) on mobile browsers. for the performances sake 1. can i detect user browser width and type(mobile or not) on the server? 2. Can i analyse the http request to detect that? 3. Can i do this without Ajax and page Redirectings?

    <div class="container-fluid">
    <div class="row">
       <div class="header-container">
      <div class="video-container">
        <video id="video" autobuffer  preload="true" autoplay="autoplaymuted" loop="loop" volume="0" poster="pic.jpg">
          <source src="video/cover.mp4">
          <source src="video/cover.webm" type="video/webm">
          <source src="video/cover.ogv" type="video/ogg">   
        </video>
      </div>
      <h3> my web video header </h3>
    </div>
    </div> 

Answer 1

Please try this. May be it will work for you.

$(document).ready(function(e) {
    var getWidth = $(window).width();
    console.log( 'Onload' + getWidth );
});
window.onresize = function() {
    var getWidth = $(window).width();
    console.log( 'on resize window' + getWidth );
};