Angolo In Alto a Sinistra
Angolo In alto a Destra
Aumenta la dimensione del Carattere
Riduci la dimensione del Caratterere

Come determinare a priori le dimensioni dello schermo - (Che cosa è questa cosa?)

Come Determinare A Priori Le Dimensioni Dello Schermo

Questo frammento di codice nel linguaggio php mi permette di valutare a priori le dimensioni della pagina e quindi mi permette di adattare gli elementi di ogni pagina alla effettiva apertura del viewport. Tutto questo funziona perfettamente ma con i telefonini di ultima generazione, i-phone touch screen ecc. abbiamo un problema. Per questo ho inserito nella testata un bottone molto grande con scritto mobile che permette all' utente umano di navigare in modalità telefonino.
  • Immagine Superiore

<?
/*******************************************
Frammento di codice che  permette di
determinare a priori la dimensione dello schermo
*******************************************/
$wi = 1024; // valore di default
$video =  $js = 0; // valore di default
if (isset($_GET['w'])) { // se conosciamo già la dimensione del video
  $wi =$_GET['w']; // prendo il valore della larghezza e lo utilizzo per stabilire il tipo di video
  $video = getVideo(); // $video potrà valere 0 per $wi fino a 800 pixel 1 per  $wi tra 800 e 1024 pixel e 2 per $wi > di 1024 pixel
} else { //altrimenti
  /**************************************
  Passo il valore della larghezza del video con java script.

  Preservo la stringa originale e passo la variabile windows.innerWidth,

   (per i browser della famiglia firefox e simili)

  se è disponibile altrimenti utilizzo screen.width.

  (Per i browser della famiglia microsoft).

  innerWidth capisce l'effettiva apertura del browser,  ma non è supportato da tutti i browser,

   screen.width dà solo il valore della massima apertura dello schermo.

  La Variabile passa come GET che poi utilizzerò nella parte superiore di questo if,  attenzione! non passano  le variabili POST.  
  Questo blocco di codice deve essere inserito in tutti i file di ingresso al sito:
  La variabile js serve nel caso in cui Java script sia disabilitato dall'utente in questo caso passa il valore di default
  che è 1024
  **************************************/
  $headerone = 1; // se questa variabile è vera headerone non sarà ripetuto nell' header
  require_once 'headerone.php'; //inizio del file html serve per evitare un errore del W3c
  echo "<script type = 'text/javascript' language='javascript'>\n";
  echo " js = 1;";
  echo " foxbrow = 0;";
  echo " foxbrow = window.innerWidth ;";
  echo " scrwi = screen.width ;";
  echo "if(foxbrow){";
  echo " location.href='${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}&w=' + window.innerWidth ;\n";
  echo" }else{";
  echo"location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}&miex=1&w=\"+ screen.width;\n";
  echo "}";
  echo "</script>\n";
  if($js){exit(); }else {$_GET['w'] = $wi; }
}

/******************************************

Questo è il contenuto di headerone.php  serve per evitare di avere un errore nel validatore W3c
echo " <!DOCTYPE html>";       
echo "<html xmlns = 'http://www.w3.org/1999/xhtml' xml:lang = 'en' lang = 'en'>\n ";
echo "<head>\n";
echo "<meta charset=\"UTF-8\">\n";
?>
<!-- headerone -->

*******************************************/

Funziona così: l'utente chiede al Server di vedere una determinata pagina Il server manda in esplorazione Java Script che scopre quale è la dimensione del dispositivo ed una volta scoperta l'informazione fa a sua volta una richiesta al server di quella pagina aggiungendo il valore di w per capire in modo automatico se il dispositivo è uno smartphone utilizzo User Agent.

Nel codice successivo utilizzo il valore w per sistemare i vari elementi di css e le dimensioni delle immagini e dei font in base al valore di w.

I telefonini di ultima generazione tendono a simulare in modo perfetto lo schermo di un computer per cui lavorano a 1024 pixel.

La pagina a 1024 pixel viene mostrata in varie colonne ma anche se sono 1024 pixel, nello schermo del telefonino questi pixel sono affollati come una piazza di paese il giorno del Santo Patrono.

Bisogna fare in modo che il programma sappia riconoscere se la pagina è vista con un computer a 1024 pixel in uno schermo di 20 pollici  o con un telefonino a 1024 pixel in uno schermo di 7 pollici.

Per questo si potrebbe utilizzare  User Agent.

User Agent ci fornisce in anticipo il tipo di browser che sarà utilizzato, la fregatura è che praticamente esistono migliaia di User Agent quasi uno per ogni telefonino, ed  inoltre i costruttori di telefonini tendono ad emulare sempre di più il computer per cui arriveranno ad utilizzare lo stesso browser del computer.

Per questo ho inserito nella testata un bottone molto grande con scritto "mobile" che permette all' utente umano di navigare in modalità telefonino.

In questo primo round Umano batte Computer 1 a 0.

Questo algoritmo funziona, per provarlo modificate la dimensione della finestra del vostro browser e cliccate sul bottone Grafico, posto in alto a sinistra, vedrete che l'aspetto della pagina si adatterà alla nuova apertura.

Permalink:
https://www.makervi.it/?titolo=come-determinare-a-priori-le-dimensioni-dello-schermo&info=53
tags: frammento linguaggio permette valutare dimesioni permette adattare elementi effettiva
Dalla Redazione [?]
Hashtag Maggiormente Ricercati
Ventiquattro bottiglie di vino Primitivo Doc dalla Puglia alla Vostra tavola per meno di 6 euro a bottiglia.
Scegli la Bacheca in cui intervenire [?]
Scegli il Tipo di Assemblea in cui Vuoi Esprimere il Tuo Voto [?]
Termini Maggiormente Ricercati
Ventiquattro bottiglie di vino bianco Malvasia e Chardonnay dalla terra della Puglia alla Vostra tavola per meno di 4 euro per ogni bottiglia
Angolo in Basso a Sinistra
Angolo in basso a Destra