Come rilevare tipo di device con HTML / CSS

Roky88

Nuovo Utente
57
1
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:

cdtux

Utente Èlite
1,829
911
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
HDD
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
GPU
Gigabyte GTX1060 6GB
Monitor
Dell U2412M
PSU
Seasonic Focus Plus 650
Case
Corsair Graphite 760T
OS
Debian / Ubuntu
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.
 

ClaudioSnowboarder

Nuovo Utente
25
2
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
 
  • Mi piace
Reazioni: Roky88

Roky88

Nuovo Utente
57
1
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

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

ClaudioSnowboarder

Nuovo Utente
25
2
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
 

Roky88

Nuovo Utente
57
1
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

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
 

Roky88

Nuovo Utente
57
1
per errore nel codice scritto su compare "container" invece di "elemento", ho corretto ma comunque non funziona!
 

Roky88

Nuovo Utente
57
1
a me no...invece di visualizzarmi un'immagine (400x300)px me la visualizza 100% x 700px praticamente come la dimensione del div
 
Ultima modifica:

ClaudioSnowboarder

Nuovo Utente
25
2
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.
 

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!