En utilisant les Media Queries Pour n'Inclure que les Fichiers JS Sur Mobile

Je suis en train d'utiliser l'attribut media de pour seul lien de mon javascript fichiers sur les appareils mobiles, pas sur le bureau.

Voici mon lien tag:

<script type="text/javascript" media="screen and (max-width : 850px)" src="mobile.js"></script>

Mais ce n'est pas le travail, c'liens JS à tout.

Comment puis-je le seul lien d'un fichier JS si elle répond à ces conditions de la requête?

Si je ne peux pas comment faire pour exécuter uniquement JS si c'est sur un mobile?

OriginalL'auteur Joshua Soileau | 2013-09-22

  1. 11

    Comment sur l'utilisation de javascript pour qui?

    <script type="text/javascript">

if (screen.width < 980) { 

    document.write('<script type="text/javascript" src="mobile.js"></script>');  
 } 

</script>
    C'est ce que j'ai fait. Juste ne sais pas si il y avait un moyen de le spécifier dans le code HTML. Merci!
    attention, cela ne fonctionne pas sur tous les appareils mobiles, tels que le Samsung Galaxy II en cours d'exécution Android < 3.
    pourquoi ne pas travailler? Tout cela semble assez conforme à la norme; ce que la partie d'échec?
    C'est une méthode en deux étapes question. 1. Est ce document.écrire est douteux dans le meilleur des cas 2. de l'écran.largeur obtient la taille incorrecte sur cet appareil, même avec la bonne fenêtre d'affichage

    OriginalL'auteur frenchie

  2. 1

    Il y a deux façons dont vous pouvez faire ceci:

    1. Tous vos scripts sur la page déjà et de les invoquer lorsque les points d'arrêt sont déclenchées
    2. Charge vos scripts seulement quand ils sont nécessaires, une fois un point d'arrêt est rencontré

    De toute façon, vous aurez besoin de ceci:

    enquire.js

    Ce qui vous permettra d'ajouter des requêtes de média rappels pour les js.

    L'idée est de ne pas ajouter plus de surcharge sur les appareils mobiles. requirejs = 84.6 k pas très nombreux fichiers js sont même la moitié de ce gros.
    Il y aura toujours plus généraux, comme ce que jamais la solution est mise en œuvre aura une taille... donc les frais généraux. Vous aurez à peser si l'ajout surcharge de la logique ou sur mesure enquire.js est plus grande que la sauvé surcharge d'avoir tous les scripts dans la page déjà.
    Je préfère conditionnelle de la charge ( et à faire ) avec un couple de lignes de JavaScript que de quelques centaines d'octets sur quelque chose qui est presque un Meg. esp. Quand il s'agit de UX pour les utilisateurs mobiles.
    Je suis d'accord. Je préfère le faire aussi. Mais le couple de lignes ne permet pas de couvrir un grand nombre de cas. Comme d'un commun cas d'utilisation d'un utilisateur de tourner leurs appareils. Par conséquent, vous avez chargé dans Un script, mais en réalité, ils ont besoin de script B.
    Puis ajouter un écouteur qui est seulement une douzaine de plus charachters à une page. Le point important est "mobile first", ce qui signifie que l'Utilisateur en premier. En d'autres termes, être attentif à ceux qui sont sur la bande passante limitée, à ne pas faire vous-même et les autres paresseux développeurs de "faciliter la vie". Apprendre le métier et arrêter le dumping inutile actifs qui sont plus gros que la page, c'est l'auto.

    OriginalL'auteur jshthornton

  3. 0

    Poids léger et fonctionne partout w/o les frais généraux. 

    if (document.documentElement.clientWidth < 900) {   //scripts }

    OriginalL'auteur