Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074

    [media query] su smartphone (portrait) non va

    Salve,
    ho creato un sito responsive, che utilizza le seguenti media query:
    codice:
    @media only screen (min-width: 1601px) {...}
    @media only screen (min-width: 1280px) and (max-width: 1600px) {...}
    @media only screen (min-width: 1080px) and (max-width: 1279px) {...}
    @media only screen (min-width: 751px) and (max-width: 1079px) {...}
    @media only screen (min-width: 640px) and (max-width: 750px) {...}
    Funziona perfettamente anche su smartphone, ma solo se l'orientamento è orizzontale (landscape); se ruoto lo smartphone (provato con più dispositivi), carica comunque la versione con risoluzione superiore, e quindi sballando il layout.
    Provato sia su dispositivo con ris. 1920x1080 che su dispositivo con ris. 1280x720. In pratica, se il dispositivo è orientato in verticale (portrait), carica la versione relativa alla risoluzione superiore (1920 e 1280, rispettivamente, negli esempi indicati).
    Come si risolve???
    Grazie per aiuti e/o indicazioni risolutive...
    metatad
    graphic & web design

  2. #2
    Così senza esaminare il sito è difficile dire qualcosa... Dovresti utilizzare gli strumenti di ispezione del codice del browser, modificando la risoluzione e osservado la reazione delle mediaquery ai vari breakpoint, vedere se si attivano o meno, se c'è qualche contrasto tra le gerarchie. Solo così puoi capire cosa non sta funzionando.

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    È qualcosa di più complesso... Mi spiego. Il mio smartphone ha risoluzione 1280/720, quindi - teoricamente - in verticale dovrebbe avere 720px di larghezza... Per capire di più, ho messo uno script che mostra la larghezza dello schermo, e invece mi dice che è 360!
    Non solo. Se guardo la pagina su desktop restringendo la finestra a 360px, si vede corretta, su mobile invece alcune cose sballano...
    ???
    metatad
    graphic & web design

  4. #4
    Fammi capire: testato su desktop (sia con ff, chrome e ie) con strumenti di simulazione del device, le mediaquery, e tutti i relativi breakpoint, funzionano tutti correttamente, con entrambi gli orientamenti dello schermo?
    È un problema che si manifesta SOLO su device mobile? Hai provato device con diverso browser?
    Si tratta di un sito statico o dinamico? Hai attivi script che modificano il DOM? Hai provato a disabilitarli?

    Considerazione banale a margine: indipendentemente dalla risoluzione dello schermo del dispositivo mobile, un po' di spazio se lo prendono anche gli strumenti di navigazione del browser.

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    Si funziona tutto. Alla fine, ho sistemato, creando un ulteriore media query per una risoluzione di 360px. Trattandosi di un sito dinamico, è stato un lavoraccio perchè una serie di cose ho dovuto farle 'al volo', usando JQuery, non potendo determinare alcuni valori prima del caricamento dei dati. Ma alla fine ce l'ho fatta.
    Resta il 'mistero': il produttore dichiara che lo smartphone ha una risoluzione di 1280x720, ma lo script al caricamento della pagina mi dice che è la metà, 640x360...
    metatad
    graphic & web design

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    Ora però mi sono accorto di un altro problema: se carico la pagina (su mobile) tenendo il device in verticale, e poi cambio orientamento (orizzontale), la pagina non si riadatta; lo stesso se passo da orizzontale a verticale. Per vederla corretta, devo ricaricarla. Come se non riconoscesse il passaggio da una risoluzione all'altra...
    Come risolvo???
    metatad
    graphic & web design

  7. #7
    Guarda, non posso essere specifico, l'unica cosa che posso dirti è che le mediaquery hanno un funzionamento solido e "meccanico", quindi qualunque problemo tu abbia io lo imputerei a qualcos'altro che va ad interferire.

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 © 2025 vBulletin Solutions, Inc. All rights reserved.