Aiuto con navigator.userAgent.match

**EmanuelePerrone** · 27-02-2015, 11:57

Ciao ragazzi,
avrei bisogno dell'aiuto di un qualsiasi esperto/intenditore.
Ho creato un countdown che funziona alla grande. Il problema si pone nel secondo script.
Praticamente quando il countdown si carica compare la scritta "-X GIORNI" con una certa grandezza. Il problema è proprio questo: la grandezza. Se accedo da un computer mi sta bene quella che c'è, ma se accedo da un dispositivo mobile, che sia cellulare con dispositivo android, ios, windows phone, poco importa la scritta risulta essere troppo grande.
Quando si accede sul sito www.sitoweb.it da un computer vorrei che la scritta comparisse con una dimensione (ipotizzo) di 20 pixel; quando si accede allo stesso sito da cellulare vorrei che la scritta comparisse con una dimensione (re-ipotizzo) di 10 pixel.

Vi spiego la struttura del codice:

abbiamo la prima parte in html in cui si decide lo stile e si colloca il div in una parte della pagina;
il primo script che calcola quanti giorni mancano alla data del 24 luglio 2015 e in un secondo momento sostituisce alla scritta "caricamento countdown" il numero dei giorni mancanti + la scritta "GIORNI" (in sostanza appena caricato il sito esce scritto "caricamento countodown..." dopo qualche istante viene sostituito da "-150 giorni";
il secondo script è quello che mi sta dando problemi e dovrebbe capire quando il visitatore è un dispositivo mobile, ipad o è un computer; nel primo caso lo script dovrebbe cambiare la dimensione font dello span con id "countdown"; nel secondo caso lo script dovrebbe ridurre la dimensione del font, ma oggi come oggi non lo fa.

codice:

<div style="font: 4em helvetica;float:center;text-align:center;margin:0;padding:0;color:#fff;">

codice:

<span id="countdown" style="font: bold 1.5em helvetica;">CARICAMENTO COUNTDOWN...</span>


<script>
// set the date we're counting down to
var target_date = new Date("Jul 24, 2015").getTime();


// variables for time units
var days, hours, minutes, seconds;


// get tag element
var countdown = document.getElementById("countdown");


// update the tag with id "countdown" every 1 second
setInterval(function () {


   // find the amount of "seconds" between now and target
   var current_date = new Date().getTime();
   var seconds_left = (target_date - current_date) / 1000;


   // do some time calculations
   days = parseInt(seconds_left / 86400);
   seconds_left = seconds_left % 86400;

   hours = parseInt(seconds_left / 3600);
   seconds_left = seconds_left % 3600;

   minutes = parseInt(seconds_left / 60);
   seconds = parseInt(seconds_left % 60);

   // format countdown string + set tag value
   countdown.innerHTML = "-" + days + " GIORNI";
   // + hours + " ORE " + minutes + "m, " + 
   // seconds + "s" 


}, 1000);
</script>
<script>
var isMobile = {
   Android: function() {
       return navigator.userAgent.match(/Android/i);
   },
   BlackBerry: function() {
       return navigator.userAgent.match(/BlackBerry/i);
   },
   iOS: function() {
       return navigator.userAgent.match(/iPhone|iPad|iPod/i);
   },
   Opera: function() {
       return navigator.userAgent.match(/Opera Mini/i);
   },
   Windows: function() {
       return navigator.userAgent.match(/IEMobile/i);
   },
   any: function() {
       return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
   }
};


function resize() {
   if ( isMobile.any() ) {
       document.getElementById("countdown").style.font = "bold 0.5em helvetica";
}


 else {
   return;
 }}
</script>
</div>

Signori, scusatemi, ma sto avendo problemi di pubblicazione...

**m4rko80** · 27-02-2015, 18:38

Ciao, potresti assegnare una classe dove interessa la modifica del font-size e utilizzare semplicemente le media query css per gestire il font-size. Esempio In questo modo a seconda delle dimesioni dello schermo del dispositivo e anche sul resize si può alterare una regola css.

**carlomarx** · 01-03-2015, 17:22

Prova a usare solo CSS. Magari parti da qui:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<style>
@media only screen and (max-device-width: 3in) {
    body {
        color: red;
    }
}

</style>
</head>

<body>

<p>Lorem ipsum</p>

</body>
</html>

Come dimensione del display del telefonino ho usato un valore a caso – 3 pollici (3in): fa' delle prove e calibra a piacimento fin quando il testo di esempio non ti appare rosso sui telefonini e nero sul computer (magari posta qui il tuo risultato).

*IMPORTANTE* Per questo tipo di cose usa sempre unità di misura ASSOLUTE (pollici, centimetri, etc.) e *mai* relative (pixel, em, etc.): è l'unico modo per sapere *realmente* le dimensioni di un display per come appare nella realtà.

**EmanuelePerrone** · 02-03-2015, 11:48

Grazie per le risposte...
Conoscevo questo espediente con CSS. Il fatto è che sto creando un sito con Wix.com . Non mi permette di modificare quindi l'head del sito. Devo proprio aggiungere una specie di frame nel sito (sarebbe un'app che si chiama HTML - per info potete vedere qui http://it.wix.com/support/html5/wix-...8-ladd-on-html). Quindi posso curare lo stile solamente attraverso l'attributo HTML "style" o qualche script javascript... per questo avevo bisogno di farlo funzionare al meglio.

**carlomarx** · 02-03-2015, 20:20

Originariamente inviata da EmanuelePerrone

Grazie per le risposte...
Conoscevo questo espediente con CSS. Il fatto è che sto creando un sito con Wix.com . Non mi permette di modificare quindi l'head del sito.

Aggiungi un css scoped!

**EmanuelePerrone** · 04-03-2015, 11:53

Originariamente inviata da carlomarx

Aggiungi un css scoped!

Grande, grazie!

**EmanuelePerrone** · 04-03-2015, 16:07

Ho inserito il tag scoped, ma nulla, non mi da nessun risultato. Ho letto il tag è supportato solo in firefox, è possibile?

**EmanuelePerrone** · 04-03-2015, 16:20

Non riesco a pubblicare il codice, non so per quale motivo il server mi dice "Not Acceptable".
Comunque vi pubblico uno screenshot del codice modificato con il tag scoped

ss.jpg

Discussione: Aiuto con navigator.userAgent.match

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto con navigator.userAgent.match

Permessi di invio