Question

到目前为止，我一直使用css和媒体查询来防止加载图片。现在我必须要求防止部分html，脚本在移动浏览器中加载。以下是我用来阻止图像加载的方法

@media (min-width:601px) {
   .image {
      background-image: url(http://www.example.com/wp-content/uploads/2013/05/img.jpg);
      width:700px;
      height:350px;
   }
}

对HTML和JavaScript的任何建议？

Answer 1

您可以通过CDATA或HTML comments阻止浏览器中的HTML解析。但您必须更改server side/template generated代码以防止加载任何HTML代码。

此外，您无法阻止从script代码src属性加载脚本。您可以使用window.matchMedia和lazy-load/async来加载脚本：

if (window.matchMedia('min-width:601px')) {
   (function (callback) {
       var script = document.createElement('script');
       script.src ='url';
       script.onload = callback;
       document.documentElement.firstChild.append(script);
   })(callback/*if needed*/)
}

或使用requirejs：

if (window.matchMedia('min-width:601px')) {
   var someModule = require('moduleName_or_path');
}

您也可以使用enquirejs。

Answer 2

看看这个： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如果你想使用jQuery的javascript： What is the best way to detect a mobile device in jQuery?

当然，在检测到是否在移动设备上时，要在要隐藏的元素上添加display: none。

Answer 3

以下是一些JavaScript代码，您可以运行这些代码来包含仅限桌面的JS，并从移动浏览器中删除不需要的HTML元素。

if (window.innerWidth > 601) {
    //Run JS code that is to be loaded only on desktop browsers
    console.log("This will run only in desktop browsers");
}

if (window.innerWidth < 601) {
    //Remove HTML elements not to be shown in mobile devices
    document.getElementById("extra-info").remove();

}

防止部分html加载到移动设备中

3 个答案: