1. дома
  2. Вопрос и ответ
  3. Скрытие div только на мобильных устройствах

Скрытие div только на мобильных устройствах

2015-04-15 4 views
0

У меня есть кнопка, которая действует как кнопка «copy url». Это отлично работает ни на одном мобильном устройстве, однако я считаю, что вы не можете использовать такую ​​функцию на мобильных устройствах, поскольку они полагаются на флэш-память. На большинстве мобильных сайтов пользователи должны вручную копировать URL-адреса.Скрытие div только на мобильных устройствах

Итак, я хочу удалить свою кнопку «copy url» после обнаружения мобильного устройства.

Перед вами грилем меня, да я прочитал:

Hiding DIV if using mobile browser

Я попробовал решение, упомянутые в этом потоке, однако он не работает. Любая идея почему? Вот мой codepen:

http://codepen.io/rjtkoh/pen/dPxKeg

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

Очень высокую оценку.

источник

2015-04-15 rjtkoh

+2

Вы должны поместить свой ''

0

Причина вы видите это происходит потому, что DOM не полностью построен, поэтому, когда вы пытаетесь получить к нему доступ с помощью $('.test'), он не может получить Это. Вы должны подождать, пока он будет полностью готов.

Wrap код Javascript в функции готовой предоставленной jQuery:

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

Этот код будет выполняться только один раз все DOM загружен. Посмотрите на documentation.

источник

2015-04-15 16:51:50 Paco

0

Простой способ сделать это - просто добавить класс к элементу html при совпадении с какой-либо ситуацией.

и использовать селектор, чтобы скрыть элементы, которые вы хотите скрыть только тогда, когда класс существует

Это позволяет скрыть элемент даже <body></body> не actully загружены.

Кроме того, для этого требуется минимальная операция 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>

источник

2015-04-15 17:01:34 Jerry

0

ли кто-нибудь взглянуть на его codepen? Эй, парень,

  • Вы не включили JQuery при его использовании. Поместите это в свой HTML-код <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

  • вы поместите свой скрипт в неправильную область, переместите его в раздел JS.

  • Полученная переменная, которую вы получили, должна использоваться в инструкции 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; } }

источник

2015-04-15 17:29:52 Han

Смежные вопросы

 Смежные вопросы