Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    46

    Responsive deisgn problema galaxy s3, position:fixed

    Salve a tutti, ho un piccolo problema con Nivoslider e l'ottimizazione di questo su Galaxy3 in versione portrait.
    Nel sito in oggetto utilizzo NivoSlider come sfondo mentre faccio sorrere il testo al di sopra.
    Ho quindi inserito position:fixed al contenitore dello slider.
    Per far si che le immagini coprano l'intera porzione dello schermo ho impostato width:auto e height:100% alle <img>.

    Il problema è che in questo modo le foto vengono compresse e distorte all'interno dell'area dello schermo, ma questo succede solo sul galaxy mentre su iphone 3 4 e 5 il tutto viene visualizzato correttamente:
    http://www.jeanclaudechiementin.com/dinomusa/

    Ho notato che inserendo position:absolute al contenitore, le foto non vengono distorte ma naturalmente lo slider non rimane fisso ma scrolla (vedere le pagine interne).

    HTML:
    <div id="bg-nivo-slider">
    <ul>
    <li><img src="images/home-1.jpg" /></li>
    <li><img src="images/home-2.jpg" /></li>
    <li><img src="images/home-3.jpg" /></li>
    <li><img src="images/home-4.jpg" /></li>
    </ul>
    </div>

    CSS:
    #bg-nivo-slider{
    width:100%;
    height:100%;
    position:fixed;
    z-index:0;
    overflow:hidden;
    }
    .nivo-main-image, .nivoSlider img, #bg-nivo-slider img{
    height:100%!important;
    width:auto!important;
    }

    SPero che qualcuna riesca ad aiutamri perchè le
    ho provate tutte, anche un codice jquery per non fare scrollare l'elemento slider di sfondo, ma l'effetto finale non era accettabile...

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    Cambia slidshow. Se non lo sai fare da te, potresti usare supersized o simili.

    Non credo che nivoslider sia fatto per queste cose.

    Per una bella risata vai QUI

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    46
    Si hai ragione, difatti di solito utilizzo bx-slider che oltra ad avere molti setting mi pemrette anche di distruggere lo slidere e ricaricarlo con altri setting (ad esempio passando dalla vista portrai alla landscape), il problema è che il cliente voleva nivoslider per la tyransizione a quadrati quindi sono stato obbligato a inserire questo... ora l'unica sarebbe di impostare un diverso slider solo per la versione mobile.... però mi piacerebbe capire perchè su iphone il width:auto con height:100% da il risultato atteso mentre su android no eppure se non sbaglio utilizzano tutti e due come renderizzatore webkit...

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    però mi piacerebbe capire perchè su iphone il width:auto con height:100% da il risultato atteso mentre su android no eppure se non sbaglio utilizzano tutti e due come renderizzatore webkit...
    Dipende cosa c'hai messo in mezzo te.
    A me con le immagini funziona sempre con tutti i s.o e browser (dolphin e simili compresi)
    Per una bella risata vai QUI

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.