Javascript移动设备宽度检查和类删除答案

【问题标题】：Javascript mobile device width check and class removeJavascript移动设备宽度检查和类删除
【发布时间】：2015-06-14 07:55:22
【问题描述】：

如果设备宽度低于 1200 像素（因为移动视图），我需要从我的网站中删除一些类。

我尝试使用 Javascript，这个方法效果很好：

$(window).resize(function(){
var current_width = $(window).width();
if(current_width < 1200)
  $('a').removeClass("expand");
  $( ".effects clearfix" ).remove();
  $( ".overlay" ).remove();
  $('#removeimg').removeClass('img').addClass('imgmobile');});

但问题是，这只有在我调整窗口大小时才有效。因此，如果我使用智能手机（Android 4.3、Chrome）打开该网站，该脚本将无法运行。

我尝试编写这段代码，但失败了：

function checkWidth() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (window.innerWidth < 1200)  {
        $('#removeimg').removeClass('img').addClass('imgmobile');     
    }
    if (window.innerWidth < 1200) {
        $( ".effects clearfix" ).remove();    
    }
    if (window.innerWidth < 1200) {
        $( ".overlay" ).remove();    
    }
    if (window.innerWidth < 1200) {
        $('a').removeClass("expand");  
    }

如何检查设备宽度并将这些类设置为 1200 像素以下？（我还尝试使用媒体查询修改/设置初始值/css，但不幸的是我仍然需要删除这些类:()

感谢您的任何想法。

【问题讨论】：

你的函数很可能永远不会被调用。您需要一个事件来触发它，这可以是 document.ready。调整大小正在触发，因为每次调整浏览器大小时都会触发该函数。

标签： javascript jquery css width removeclass

【解决方案1】：

您已将代码放在 resize 函数中，即它仅适用于调整窗口大小。在 ready 函数中调用一次，在 resize 中调用一次。

【讨论】：

【解决方案2】：

另一种解决方案可能是使用单独的类并在 CSS 的媒体查询中使用 display: show 和 display: hide。

这适用于移动平台，但您可能需要执行多个媒体查询。我希望这会有所帮助。

【讨论】：

谢谢，我已经尝试过这种方式，但我发现我需要完全删除这些类。

【解决方案3】：

尝试将窗口包装在 jquery 元素中。那应该对你有用。您还需要一个事件来触发此功能。

$(document).ready(function(){
   if ($(window).innerWidth() < 1200)  {
            $('#removeimg').removeClass('img').addClass('imgmobile');     
        }
});

【讨论】：

谢谢，这段代码运行良好，但 Android Chrome 似乎仍然忽略了 javascript 代码或其他东西。我的问题是带有链接的 img 元素，某些类不允许在移动浏览器上单击它。如果我手动删除这些类，则 img 链接效果很好。但是我需要为非移动设备保留它们，这就是为什么我认为如果我为移动浏览器删除 javascript 就可以了。 :( 也许我应该放弃所有课程（他们制作动画 img 悬停效果会导致移动设备出现问题）。