检测浏览器宽度并阻止下载页面段答案

【问题标题】：Detect Browser width and prevent downloading page segments检测浏览器宽度并阻止下载页面段
【发布时间】：2018-05-07 19:46:12
【问题描述】：

我打算为我的网页使用 html5 视频标题。我在服务器上使用 Codeignitor(PHP)，在客户端使用 bootstrap 和 jquery。视频标题在较大的屏幕尺寸上很好且有效。但是以较低的下载速度在移动浏览器上加载需要相当长的时间。这样我想阻止以下代码部分在移动浏览器上下载或执行（而不是隐藏下载的元素）。为了性能 1. 我可以在服务器上检测用户浏览器的宽度和类型（是否移动）？ 2.我可以分析http请求来检测吗？ 3. 我可以在没有 Ajax 和页面重定向的情况下做到这一点吗？

    <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>

【问题讨论】：

如果不先通过 JavaScript 检测并通过 AJAX 或重定向将其交给服务器，您将无法检测浏览器宽度。但是，您可以check what the user agent is。如果可以使用JavaScript，也可以在确定浏览器宽度后才追加视频。
第 1、2 和 3 题的答案：否。
建议的工作流程： 1. 从视频中截取第一帧。 2. 将该图像作为视频所在元素的背景。 3. 使用 javascript 确定要使用的视频。 4. 使用 javascript 将该视频放入 video 元素中。

标签： javascript php html

【解决方案1】：

请试试这个。也许它会为你工作。

$(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 );
};

【讨论】：