Come cambiare CSS in base al dispositivo mobile?

Nel seguente esempio, voglio visualizzare un solo div, a seconda del dispositivo.Come cambiare CSS in base al dispositivo mobile?

ho familiarità con il modo di utilizzare @media per sostituire una classe CSS, ma non come fare un condizionale.

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

Qualche suggerimento?

fonte

2013-04-22 4thSpace

Sono un po 'confuso qui ma tutto ciò che vuoi è mostrare i diversi elementi div a seconda della dimensione dello schermo che l'utente sta visitando? – Hoshts

Indipendentemente dal fatto che il contenuto sia nascosto, l'utente continuerà comunque a scaricarlo. Un sacco di persone pagano con la KB sui loro piani mobili in questi giorni. – cimmanon

Non molti. Molti piani sono dati illimitati. Ma non proprio un modo per aggirare il problema con KB. Penso che nascondere/mostrare queste due div è la soluzione. Ho solo bisogno di usare nomi di classi diversi. – 4thSpace

Hm Penso che sia più facile per creare 2 o più file CSS e caricarli tramite javascript in base al dispositivo. Qualcosa del genere all'interno della funzione onload: file

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

più breve e più leggibile css facile scambio.

fonte

2013-04-22 20:41:03 OliverK

I 'Mi piacerebbe evitare javascript. – 4thSpace

Ecco un esempio di come si può fare in modo condizionale senza 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</div> 

<div class="visibledevice">this displays for mobile</div>

fonte

2013-04-22 23:18:29 4thSpace

E come si definisce la classe div al primo posto? è il div due renderizzato in HTML, non importa quale sia il dispositivo.! in questo caso eseguiremo il rendering di due div con lo stesso contenuto sulla pagina. dagli aspetti SEO non credo che sia una buona idea che la densità KW sarà raddoppiata. scorso ho votato come la soluzione ancora meglio di soluzioni Js –

come può essere fatto con larghezza specifica fuori? – fdrv

@fdrv non può farlo se non si utilizzano gli user-agent. bello, shoud essere contrassegnato come migliore risposta – User

come fare un conditionnal media query CSS:

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

fonte

2013-09-24 00:09:28

So che questo è un vecchio thread, ma i capito una scelta migliore .. per me almeno

<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" rel="stylesheet" media="all" href="/styles/mobile.css">'; 
} 
else{ 
echo '<link type="text/css" rel="stylesheet" media="all" href="/styles/desktop.css">'; 
}; 
?>

fonte

2014-06-19 20:48:10 ihateclownz

Ottengo un avviso: 'Avviso: Undefined variable: useragent in [...] linea [...]' utilizzando il codice. Immagino sia il '$ useragent' alla fine della linea. Puoi spiegarti? – uomopalese

Come cambiare CSS in base al dispositivo mobile?

risposta

Problemi correlati