Visualizzazione dei risultati da 1 a 7 su 7

Discussione: layout dinamici

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    15

    layout dinamici

    Salve, avrei un problema con questo codice javascript / html che ho trovato su questa pagina:
    http://www.html.it/articoli/layout-d...risoluzione-1/

    Il problema e' che pur avendo creato uno stile che si addatta alle diverse risoluzioni dello schermo, quando apro la pagina in "modalita' piccola / a schermo piccolo o ridotto" mi compare sempre la pagina impostata con gli stili di default, poi se ingrandisco lo schermo o lo rimpiciolisco lo script comincia a funzionare correttamente e a cambiare i diversi stili css impostati per la diversa risoluzione.
    Come posso fare in modo che aprendo la pagina a "300x300 esempio" mi compaia subito gli stili impostati per quella grandezza e non gli stili di default?
    Perche' ad esempio aprendo la pagina dal telefono(che ha una grandezza di 200x400 penso) ad esempio, lui mi apre sempre e comunque la pagina impostata con gli stili di default e non quelli impostati per la sua risoluzione?
    javascript sul telefono e' attivato!

    Se per caso conoscete qualche script che faccia questo lavoro potete condividerlo?
    Ultima modifica di Egzon; 07-02-2017 a 06:29 Motivo: errori di battitura

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,285
    Ciao, sinceramente lo script è piuttosto datato (2005). Usare javascript per aggiugere o rimuovere una classe e modificare lo stile del layout secondo me si potrebbe anche evitare. Sarabbe più pratico e funzionare fare qualcosa piuttosto con i css/media query
    Qui ci sono degli esempi su come funziona, oppure se vuoi usare un layout che fa già tutto questo più molte altre cose ti consiglierei di dare un occhiata a Bootstrap , facile da integrare ed usare.

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    15
    Ho dato un'occhiata a css/media query e sempra promettere abbastanza bene e mi metto subito a provarlo, per quanto riguarda Bootstrap, volevo fare tutto quanto da codice scritto da me, senza usare librerie esterne con codici già preconfezionati magari. Però ho visto che ci sono dei menù fantastici e già pronti per l'utilizzo do un'occhiata anche a questi in ogni caso. Grazie mille

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    15
    Ho provato media/query però mi da lo stesso problema, anche se definisco gli stili per uno schermo inferiore a 300px, lui comunque continua a mostrarmi sempre lo stile che ho impostato per schermi più grandi di 300px anche se apro la pagina da telefono.
    So che i telefoni hanno una impostazione che adatta autoamticamente la pagina web alla sua risoluzione cambiandone le grandezze e altro, non è che per caso bisogna inserire un comando all'interno dell'head che dica al telefono di non impostare niente automaticamente? e di prendere come valori i stili impostati per la sua risoluzione?

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    15
    Anzi diciamo che non è lo stesso problema, questo va molto meglio. Ho impostato tre stili differenti:
    uno che va dai 900px in su (computer)
    uno che va dai 900px ai 400px (tablet)
    e uno che va dai 400px in giù (telefoni)
    E tutto funziona corretamente sul computer.
    Se però visualizzo la pagina dal telefono lui non mi mostra quella da 400px in giù ma mi mostra sempre quella da 900px in su

  6. #6
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    Messaggi
    2,285
    Probabilmente perchè la risoluzione del tuo telefono va oltre i 400 px che ti aspetti.
    QUI c'è una guida che potrebbe tornarti utilie. Oppure QUI, modificando il viewport initial-scale potresti ottenere quello che ti serve.

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    15
    Ok, grazie mille, ora me le guardo entrambe

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.