Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117

    Media queries differenti per android?

    Buongiorno.
    Sto impostando delle media queries su un sito e tutto funziona perfettamente. Accedo da mobile ed effettivamente l'impostazione che ho dato è corretta, tutto è responsive e sono soddisfatto di me stesso.
    Poi invece noto che (solo su mobile) non viene applicata una media query. Allora vado a confrontare i breakpoints da me impostati e poi vado a vedere la risoluzione del mio LG G4 nella scheda tecnica e noto questo:
    Larghezza Schermo Mobile: 1440px
    Eppure subisce l'effetto delle media queries come se fosse compreso tra 768px e 1024px.
    Qualcuno è in grado di spiegarmi questo fatto? Così magari mi do una regolata.

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    No, purtroppo è ben più visibile di così per poterlo confondere.
    codice HTML:
    /* MEDIA QUERIES */
    @media screen and (max-width: 1300px) {
    #user {background: #f1f1f1; left: 100%; transition: all 0.4s;}
    #user.slidein {transform: translateX(-100%); !important;}
    #usertoggler {display: inline;}
    #usertoggler.slidein {transform: translateX(-560px); !important; background: url(images/userminus.png) no-repeat center #f1f1f1;}
    }
    @media screen and (max-width: 1024px) {
    .area:nth-child(3), .area:nth-child(5) {clear: left;}
    .area {width: 50%;}
    }
    @media screen and (max-width: 768px) {
    #right {width: 100%;}
    #left {width: 100%; clear: both;}
    .area {clear: none;}
    }
    Sono gli unici 3 breakpoint impostati fin'ora.
    #usertoggler è visibile solo con screen size inferiore a 1300, ed effettivamente da mobile è visibile.
    Il terzo e quinto .area vanno a capo (eludono il float dell'elemento precedente) solo per screen size inferiore a 1024, ed effettivamente da mobile è così.
    #left e #right passano da width: 50% a width: 100% solo per screensize inferiore a 768px, però da mobile questo non succede.

    Se invece prendo la finestra del browser da desktop e la ridimensiono manualmente, tutto funziona perfettamente.

    Prova tu stesso. www.maremmahost.it

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Esattamente quello che hai detto. Ma tu hai fatto accesso da firefox desktop oppure android?
    Dal browser firefox desktop left e right vanno al 100%. Da browser mobile no, quindi devo supporre che il mobile abbia screen width maggiore di 768px, ma comunque minore di 1024 (visto che le altre due media query si applicano).
    Eppure secondo la scheda tecnica del mio G4 la risoluzione ha larghezza 1440.
    L'unica spiegazione che mi so dare � che nelle media query la dicitura "screen width" non faccia riferimento alla risoluzione ma a qualcos'altro.

  4. #4
    Sul mio telefono è l'header a non essere responsivo.
    L'header "allarga" il body, probabilmente è per quello che la tua media-query non viene applicata su mobile.

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Ho aggiunto il meta tag: era esattamente questo. Ho risolto, grazie mille!

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