скажите html doc не загружать js, если мобильное устройство

я нахально ищу строку или две кода на лету здесь:

может ли кто-то быть достаточно любезным, чтобы предоставить код для размещения в головном разделе html doc, который говорит, что если мобильный, то не загружайте JS?

Это используется в сочетании со следующим медиа-запросом CSS:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="m/styles_mobile.css" />

поэтому я ищу фрагмент кода, основанный на том же правиле: media= " только экран и (max-device-width: 480px)"

был бы очень благодарен

7
javascript media-queries

5 ответов

дано: "если мобильный, то не загружать JS", и предполагая, что "мобильный" определяется экранами шириной 480 пикселей или меньше, тогда должно работать что-то вроде следующего:

<script>
if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
</script>

это добавит элемент сценария, только если экран будет больше 480 пикселей в ширину.

правило CSS в OP:

<... media="only screen and (max-device-width: 480px)" ...>

который будет нацелен на экраны 480 пикселей или меньше, что противоречит первому утверждению. Таким образом, изменение > к <= если скрипт должен работать на маленьких экранах, а не на больших.

20

Я не уверен, как предыдущие ответы будут идти с дисплеями retina. Я бы сделал что-то вроде:

if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
 document.write('<script type="text/javascript" src="foo.js"><\/script>');

фрагмент здесь

11

Вы можете сделать это так.

  1. Проверьте ширину и высоту экрана, чтобы увидеть, если это мобильное устройство.
  2. загрузка скриптов с использованием JavaScript.

что вы можете сделать это:

var scripts = ["foo.js",       //Put all your scripts here.
               "bar.js"];

if(screen.width <= 480){
    for(var i=0;i<scripts.length;i++){
              //-with jQuery (one line!)-
        $("head").append('<script type="text/javascript" src="'+scripts[i]+'"><\/script>');
                 //-or jQuery free-
        var scriptEle = document.createElement("script");
        scriptEle.setAttribute("type","text/javascript");
        scriptEle.setAttribute("src",scripts[i]);
        document.getElementsByTagName("head")[0].appendElement(scriptEle);
    }
}

обратите внимание, что это screen.width <= 480.

5

теперь можно использовать window.matchMedia

if (window.matchMedia("(min-width: 480px)").matches) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}

https://developer.mozilla.org/docs/Web/API/Window/matchMedia http://caniuse.com/#feat=matchmedia

4

лучший способ сделать это было бы добавить его вокруг всего фактического мобильного скрипта внутри "foo.JS файл". DOM будет иметь проблемы с загрузкой тега, если вы внезапно добавите его.

if (screen && screen.width > 480) {
 // Whole your script here
}

вместо:

if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
0