Come rilevare tipo di device con HTML / CSS

Pubblicità
R

Roky88

Nuovo Utente
Messaggi
57
Reazioni
1
Punteggio
24
Vorrei utilizzare fogli di stile diversi a seconda del dispositivo su cui vine aperta la pagina internet.

Esempio: se accedo al sito

1) da smartphone (esempio android) applico il foglio di stile mobile.css;
2) da tablet applico il foglio di stile tablet.css;
3) da pc applico il foglio di stile pc.css;

La soluzione in cui setto in base alla risoluzione dello schermo non è contemplata. Quindi mi serve necessariamente sapere il tipo di dispositivo e in base ad esso viene attivato il foglio di stile corrispondente.

Soluzione HTML / CSS, ove non fosse possibile solo con questi linguaggio allora integro con javascript.

Altra cosa, devo eseguire uno script prima che tutta la pagina sia caricata, quindi un alternativa ad "onload". Lo script si trova nel codice html, quindi è interno.

Un piccolo esempio nel caso mi aiuterebbe a capire come utilizzare la vostra soluzione. Grazie :)
 
Ultima modifica:
La cosa migliore è creare un layout responsive, in modo che il tutto si adatti alla dimensione dello schermo in uso. Per fare ciò si utilizzano le media queries.
 
puoi analizzare l'useragent con javascript:

JavaScript: 
var dispositivo = navigator.userAgent.match(/(iPhone|iPad|Android)/);

if (dispositivo != null){

   if (dispositivo.indexOf("iPhone")+1 || dispositivo.indexOf("Android")+1){
       alert("mobile: " + dispositivo);
       //Applico CSS per smartphone
   } else if (dispositivo.indexOf("iPad")+1){
       alert("tablet: " + dispositivo);
       //Applico CSS per tablet iOS
   }
   
} else if (dispositivo == null){
   alert("desktop");
   //Applico CSS per desktop
}

per android però restituisce un valore generico (smartphone e tablet) quindi dovresti fare un ulteriore controllo
 
ClaudioSnowboarder ha detto:
puoi analizzare l'useragent con javascript:

JavaScript: 
var dispositivo = navigator.userAgent.match(/(iPhone|iPad|Android)/);

if (dispositivo != null){

   if (dispositivo.indexOf("iPhone")+1 || dispositivo.indexOf("Android")+1){
       alert("mobile: " + dispositivo);
       //Applico CSS per smartphone
   } else if (dispositivo.indexOf("iPad")+1){
       alert("tablet: " + dispositivo);
       //Applico CSS per tablet iOS
   }
  
} else if (dispositivo == null){
   alert("desktop");
   //Applico CSS per desktop
}

per android però restituisce un valore generico (smartphone e tablet) quindi dovresti fare un ulteriore controllo
Clicca per espandere...

Grazie lo provo ;)
altra domanda, vorrei modificare alcuni attributi tramite javascript. Esempio pratico, vorrei settare background-size: 400px 300px di una certa immagine tramite javascipt; questi valori vanno impostati al caricamento della pagina. Un esempio pratico come il precedente sarebbe ottimale :)
 
questo è il codice:
JavaScript: 
 document.getElementById("IDIMMAGINE").style.backgroundSize = "400px 300px";

però ti consiglio di mettere questo codice prima del caricamento della pagina, altrimenti vedresti l'immagine cambiare misura al termine del caricamento della pagina.

JavaScript: 
 var interval = setInterval(function() {
       if (document.readyState === "interactive") {
           document.getElementById("IDIMMAGINE").style.backgroundSize = "400px 300px";
           clearInterval(interval);
       }
   }, 100);

praticamente...carica la pagina -> esegue lo script -> visualizza la pagina caricata
 
ClaudioSnowboarder ha detto:
questo è il codice:
JavaScript: 
 document.getElementById("IDIMMAGINE").style.backgroundSize = "400px 300px";

però ti consiglio di mettere questo codice prima del caricamento della pagina, altrimenti vedresti l'immagine cambiare misura al termine del caricamento della pagina.

JavaScript: 
 var interval = setInterval(function() {
       if (document.readyState === "interactive") {
           document.getElementById("IDIMMAGINE").style.backgroundSize = "400px 300px";
           clearInterval(interval);
       }
   }, 100);

praticamente...carica la pagina -> esegue lo script -> visualizza la pagina caricata
Clicca per espandere...

Codice: 
<!doctype html>
<html>
<head>
    <title>bla bla bla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

    <script type="text/javascript">
        var interval = setInterval(function() {
          if (document.readyState === "interactive")
        {
           document.getElementById("container").style.backgroundSize = "400px 300px";
           clearInterval(interval);
          }
          }, 100);
    </script>
</head>

<style>
    div#elemento {width: 100%; height: 700px;  background-image:url(photo.jpg); background-repeat: no-repeat;}
</style>

<body>
    <div id="elemento">

    </div>
</body>
</html>

Questo codice non funziona e non so il perchè...Non accade nulla
 
per errore nel codice scritto su compare "container" invece di "elemento", ho corretto ma comunque non funziona!
 
a me no...invece di visualizzarmi un'immagine (400x300)px me la visualizza 100% x 700px praticamente come la dimensione del div
 
Ultima modifica:
ho fatto copia e incolla del codice (sostituendo "container" con "elemento") e funziona, per semplificare puoi usare solo la stringa:
JavaScript: 
document.getElementById("elemento").style.backgroundSize = "400px 300px";

riesci a caricare la pagina web che stai testando su un qualche sito? cosi posso controllare se il tuo codice a me funziona.
 
Pubblicità
Pubblicità
Indietro
Top