Sto cercando di fare una pagina html per dispositivi mobili, ma sto riscontrando un problema..
ho un'immagine all'interno di un div che deve essere ridimensionato dinamicamente e posizionato al centro dello schermo, per fare questo mi son servito di questo codice javascript:
codice:
var larghezzaschermo = screen.width;
var ridimensiona = (larghezzaschermo/4)*3;
var posizionamento = (ridimensiona/2);
document.write("<style type='text/css'>");
document.write("#schermata01 { height: "+ ridimensiona +"px; }");
document.write("#schermata01 { width: "+ ridimensiona +"px; }");
document.write("#schermata01 { margin-top: -"+ posizionamento +"px; }");
document.write("#schermata01 { margin-left: -"+ posizionamento +"px; }");
Su Iphone e Ipad funziona, il problema lo riscontro su un Asus Padfone2 con android 4(mi sembra). L'immagine viene visualizzata enorme, e da quel che ho capito il problema è che screen.width sull'asus mi restituisce il valore in pixel fisici (cioè quelli dichiarati dal produttore, non quelli utili per il css). Quindi i pixel risultano sovradimensionati per la visualizzazione css. Non so proprio come fare per creare un codice che vada bene per ogni dispositivo...