Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Cambiare Classe CSS se visual su Cellulare

  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2018
    Messaggi
    2

    Cambiare Classe CSS se visual su Cellulare

    Ciao a tutti.
    Dovrei in caso di visualizzazione su cellulare cambiare in un div da class="2u" a class="3u".

    Dichiaro una variabile mainclass="2u" generale che viene modificata se uno script di controllo se cell=true

    ma non funziona ... qche aiuto, anche se mi sta' venendo in mente che lo script di check se cellulare potrebbe non essere ok per questo. Lo uso in altra situazione di link esterno e funziona perfettamente.

    qui il mio html
    codice HTML:
    <!-- script to control if handy or pc -->   
     <script>
     var mainclass=""2u"";
     (function(a,b){if( ... all the data to check phones ... ,'var mainclass=""3u""')}  
     </script>
    
    </head>
    <body>
    <div align="center">
     <div class="12u">
      <div align="center">
       <div class="row">
         <div class=mainclass> <!-- this class has to change-->
          ..............
         </div>
    
         <div class=mainclass> <!-- this class has to change-->
          ..............
         </div>
    
         <div class=mainclass> <!-- this class has to change-->
          ..............
         </div>
    
         <div class=mainclass> <!-- this class has to change-->
          ..............
         </div>
    
         <div class=mainclass> <!-- this class has to change-->
          ..............
         </div>
    
         <div class=mainclass> <!-- this class has to change-->
          ..............
         </div>                                                 
    
     </div>
     </div>
     </div>
     </div>
     </body>
     </html>

  2. #2
    Potresti utilizzare bootstrap, o in alternativa qual framewok js.... Potresti anche controllare la larghezza del dispositivo e nel caso effetui la modifica della class!

  3. #3
    Un altra alternativa valida e che ho usato nel mio lavoro sono le media query css, ovvero condizioni css che si attivano in base alla risoluzione del dispositivo.
    Es css :
    @media only screen and (max-width: 600px) {
    body {
    background-color: lightblue;
    }
    }
    Su internet ne trovi tantissimi di questi esempi.
    Web designer, Sviluppatore web, Sistemista(Windows, Linux & Mac)
    http://www.digitalcortes.it

  4. #4
    Utente di HTML.it
    Registrato dal
    Mar 2018
    Messaggi
    2
    grazie mille. seguendo le vostre indicazioni mi sembra di aver raggiunto l' obbiettivo.
    ho usato il procedimento di intercettare la larghezza del dispositivo perche' con media only screen era da modificare troppo il CSS in quanto ci sono molti valori di setup di classi, ma io devo richiamare la classe a seconda del device.
    ho risolto cosi' :
    - nella head dichiaro le due classi mobileShow e mobileHide
    codice HTML:
    </style>
        <style type="text/css"> 
      .mobileShow {display: none;} 
      /* Smartphone Portrait and Landscape  - per visualizzare su smartphone e non su PC - */ 
      @media only screen 
        and (min-device-width : 320px) 
        and (max-device-width : 480px){ 
          .mobileShow {display: inline;}
      }
    
    
    </style>
        <style type="text/css">
      .mobileHide { display: inline; } 
      /* Smartphone Portrait and Landscape  - per visualizzare su PC e non su smartphone - */ 
      @media only screen 
        and (min-device-width : 320px) 
        and (max-device-width : 480px){ 
         .mobileHide { display: none;}
      }
    </style>
    nel body

    codice:
      <div class="mobileHide"> <!-- hide class on smartphone-->
    <div align="center">
       <div class="12u">
           <div align="center">
             <div class="row">
                   <div class="2u"> 
                   ..............
                  </div>
    
    
                   <div class="2u"> 
                   ..............
                  </div>
    
    
            </div>
          </div>
        </div>
     </div>
     </div> <!-- close the div for Hide-->
    
    
    <div class="mobileShow"> <!-- Show class on smartphone-->
    <div align="center">
       <div class="12u">
           <div align="center">
             <div class="row">
                   <div class="4u"> 
                   ..............
                  </div>
    
    
                   <div class="4u"> 
                   ..............
                  </div>
    
    
            </div>
          </div>
        </div>
     </div>
     </div> <!-- close the div for Show-->
    Grazie mille dell' aiuto, e spero che questo codice possa aiutare qualcun altro.

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