Premetto che i redirect con javascript sono penalizzanti in ottica SEO.
Inoltre, creare n versioni di ogni pagina massimizza la fatica e minimizza i risultati, in quanto potresti non tener conto di eventuali risoluzioni intermedie, dovresti gestire anche i ridimensionamenti della finestra e comunque non è una best practice.
Se vuoi un sito che si adatti a tutte le risoluzioni dovresti renderlo responsivo usando le media queries.
Fatte le dovute premesse,
lo script così com'è, se messo su tutte le pagine va in loop perché un redirect verrà comunque eseguito, indipendentemente dalla risoluzione.
Se deciderai di adottare comunque questa soluzione, per evitare il loop, dovrai mettere il redirect giusto nella pagina giusta.
Nella index.html dovrai verificare che la risoluzione non sia minore di (nel preciso ordine) 400 o 800
codice:
<script type="text/javascript">var screenwidth = screen.width;
if (screenwidth < 400) {
window.location="http://www.miosito.it/m.index.html"
}
if (screenwidth < 800) {
window.location="http://www.miosito.it/t.index.html"
}
</script>
Nella t.index.html dovrai verificare che la risoluzione non sia minore di 400 o maggiore di 800
codice:
<script type="text/javascript">var screenwidth = screen.width;
if (screenwidth < 400) {
window.location="http://www.miosito.it/m.index.html"
}
if (screenwidth > 800) {
window.location="http://www.miosito.it/index.html"
}
</script>
Infine nella s.index dovrai verificare che la risoluzione non sia maggiore (sempre nel preciso ordine, per evitare un doppio redirect) di 400 o 800:
codice:
<script type="text/javascript">var screenwidth = screen.width;
if (screenwidth > 800) {
window.location="http://www.miosito.it/index.html"
}
if (screenwidth > 400) {
window.location="http://www.miosito.it/t.index.html"
}
</script>
Se hai una sola immagine che non si adatta alle varie risoluzioni, puoi utilizzare js, in maniera analoga a quanto hai fatto per il redirect, per servire al client la giusta immagine:
codice:
<script type="text/javascript">
if(typeof window.orientation!=='undefined'){
//tablet e smartphones
document.write('<img src="image-for-mobile.jpg" alt="Versione per mobile">');
}else{
document.write('<img src="image-for-desktop.jpg" alt="Versione per Desktop">');
}
</script>
Note:
1) Questo script va messo "al posto" del normale tag <img /> in quanto usa document.write e posizionerà l'immagine esattamente dove è posizionato lo script.
2) Per la scelta dell'immagine non utilizza le dimensioni della finestra ma verifica solo se siamo su un dispositivo mobile o su un desktop. Se vuoi controllare tre o più risoluzioni lo script diventa:
codice:
<script type="text/javascript">var screenwidth = screen.width;
if (screenwidth < 400) {
document.write('<img src="image-for-smartphones.jpg" alt="Versione per mobile">');
}
if (screenwidth < 800) {
document.write('<img src="image-for-tablets.jpg" alt="Versione per mobile">');
}else{
document.write('<img src="image-for-desktop.jpg" alt="Versione per desktop">');
}
</script>
Rispondi quotando
