仅在移动设备上隐藏 div

Question

我有一个用作 'copy url' 按钮的按钮。这在 none 移动设备上运行良好，但是我相信您不能在移动设备上使用这样的功能，因为它们依赖于闪存。在大多数移动网站上，用户必须手动复制 URL。

所以，一旦检测到移动设备，我想删除我的 'copy url' 按钮。

在你烤我之前，是的，我读过：

Hiding DIV if using mobile browser

我尝试了该线程中提到的解决方案，但它不起作用。知道为什么吗？这是我的代码笔：

<head>
<script>
     var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
     $('.test').css('display', 'none');
</script>

</head>
<div class= "test">yo test me</div>

非常感谢。

Answer 1

你似乎没有对 mobile 变量做任何事情。但在您取得进一步进展之前，您必须解决阻止 $('.test').css('display', 'none'); 隐藏 div:

的问题

您引用的 DOM 元素在执行脚本时不存在。该脚本应在创建 DOM 元素后执行，这可以通过几种方式完成：

将 <script> 标记移动到 HTML 中的元素之后。这假设 link 到 jQuery 在脚本之前的某处，而不是之后。
使用jQuery的document.ready()函数只有在DOM准备好后才执行JavaScript。由于您已经在使用 jQuery，这通常是最方便的方法。

例如：

<script>
    $(document).ready(function() {
        var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
        $('.test').css('display', 'none');
    });
</script>

Answer 2

你看到这个的原因是 DOM 没有完全构建，所以当你试图使用 $('.test') 访问它时，它无法获取它。你必须等到它完全准备好。

将您的 Javascript 代码包装在 jQuery 提供的就绪函数中：

$(document).ready(function () {
    // your code goes here
});

此代码只会在所有 DOM 加载完成后执行。看看 documentation.

Answer 3

一种简单的方法是在匹配某些情况时将 class 添加到 html 元素。

并使用选择器隐藏您希望仅在 class 存在时才隐藏的元素

这允许您隐藏元素，即使 <body></body> 还没有真正加载。

此外，它需要最少的 DOM 操作。所以当需要隐藏的元素太多时，它不会滞后于页面。

只需将代码放在 <head></head>

  <script>
    if (navigator.userAgent.search("Some thing") >= 0 ) {
      /*the html element*/
      var root = document.documentElement;
      root.setAttribute( "class", "hide-for-compitibility" );
    }
  </script>
  <style>
    html.hide-for-compitibility .selectors{
      display : none;
    }
  </style>

Answer 4

有人看他的codepen吗？嘿伙计，

您在使用时没有包含 Jquery。把它放在你的 HTML 部分 <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
你把你的脚本放在错误的部分，把它移到 JS 部分。
您获得的mobile变量应该用在IF语句中。例如，

if (mobile) $('.test').css('display', 'none'); else $('.test').html('This ELSE leg should be removed');

最后，根据其他答案的意见，您应该将代码包装在 $(document).ready() 函数中。

这是一个示例，它确实有效。 http://codepen.io/anon/pen/QweBgq

另一种不使用 Javascript 的方法是使用 CSS。在 CSS 部分尝试以下代码。

.test { display: none; } @media (min-width: 768px) { .test{ width: 200px; height: 50px; background: red; display: block; } }

仅在移动设备上隐藏 div

Hiding div on mobile devices only

html

javascript

css

mobile

jquery