Comment modifier le CSS basé sur un appareil mobile?

Dans l'exemple suivant, je veux afficher une seule div, en fonction de l'appareil.

Je suis familier avec la façon d'utiliser @media pour remplacer une classe CSS, mais pas comment le faire conditionnelle.

<style type="text/css">
   @media (max-width : 770px) {
     ...
   }

  @media (max-width : 320px) {
   ...
  }
  //do I need another for the desktop?
</style>

//if desktop
<div style="width: 400px; float: left;">
    this is desktop
    <a href="somepage.html"><img src="aLargeImage.png"/></a>
</div>

//if mobile
<div style="width: 200px; float: left;">
    this is mobile
    <a href="somepage.html">just text</a>
</div>

Des suggestions?

Je suis un peu confus ici, mais tout ce que vous voulez est de montrer les différents éléments div en fonction de ce que la taille de l'écran que l'utilisateur visite?
Si le contenu est masqué, l'utilisateur aura toujours la fin du téléchargement. Beaucoup de gens payer par la base de connaissances sur leur mobile les plans de ces jours.
Pas tant que ça. Beaucoup de plans de données illimité. Mais pas vraiment un moyen de contourner par KO question. Je pense que cacher/montrer ces deux divs est la solution. J'ai juste besoin d'utiliser différents noms de classe.
pour tout ce que nous savons, les fautes de frappe pourrait être la raison pour laquelle il n'est pas de travail (ou de le copier/coller d'erreur) - modifications comme cela pourrait être la partie de la réponse, mais ne devrait pas modifier les problèmes déjà présents dans la question

OriginalL'auteur 4thSpace | 2013-04-22

  1. 12

    Voici un exemple de la façon dont il peut être fait de façon conditionnelle sans javascript:

    //CSS
.visibledevice {display:none;}
.visibledesktop {display:display;}

@media (max-width : 320px) {
    .visibledevice {display:block;}
    .visibledesktop {display:none;}
}

//in the page
<div class="visibledesktop">this displays for desktop and tablet</div>

<div class="visibledevice">this displays for mobile</div>
    Et comment définir la div de classe à la première place ? les deux div sera rendu en HTML n'importe quel appareil .! dans ce cas, nous allons rendre les deux div avec le même contenu sur la page . à partir d'aspects de SEO, je pense pas que c'bonne idée KW densité sera doublé. le dernier que j'ai voté comme la solution encore mieux que Js solutions
    comment cela peut être fait avec largeur spécifique?
    il ne peut pas, sauf si vous utilisez les user-agents.
    le travail est agréable, devraient être marqué comme meilleure réponse

    OriginalL'auteur 4thSpace

  2. 7

    Hm je pense que c'est plus facile de créer 2 ou plusieurs fichiers css et les charger via javascript en fonction de l'appareil. Quelque chose comme ça à l'intérieur de la fonction onload:

    var cssPath = "standard.css";
if (navigator.platform == "iPad")
    cssPath = "iPad.css";

var fileref = document.createElement("link");

fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", cssPath);

document.getElementsByTagName("head")[0].appendChild(fileref);

    Plus court et plus lisible des fichiers css facile à échanger.

    Je voudrais éviter de javascript.

    OriginalL'auteur OliverK

  3. 2

    Je sais que c'est un vieux thread mais j'ai pensé une meilleure option.. du moins pour moi

    <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=1">
<?php 
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
{   echo '<link type="text/css"  media="all" href="/styles/mobile.css">';
}
else{
echo '<link type="text/css"  media="all" href="/styles/desktop.css">';
};
?>

    Je reçois un avertissement: Notice: Undefined variable: useragent in [...] line [...] à l'aide de votre code. Je suppose que c'est la $useragent à la fin de la ligne. Pouvez-vous explane?

    OriginalL'auteur ihateclownz

  4. 1

    comment faire un conditionnal css media query : 

    @media only screen and (width : 1024px) and (orientation : landscape) {    
    .selector1 { width:960px; }
}

    OriginalL'auteur Philippe David

  5. 0

    Dans des cas aussi simples que tout ce dont vous avez besoin:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Essayez d'utiliser, par exemple, width:100% ou max-width - plutôt que des largeurs fixes.

    OriginalL'auteur Szél Lajos