+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

Nascondere div nella versione mobile

Ultimo Messaggio di MiWebDesign il:
  1. #1
    User
    Data Registrazione
    Jun 2005
    Messaggi
    227

    Nascondere div nella versione mobile

    Ciao a tutti,
    sto cercando di realizzare una versione mobile del mio sito.

    Dopo aver valutato le tante tecniche per realizzarlo ho deciso che mi piacerebbe realizzarlo semplicemnete con 2 CSS differenti per la versione desktop e la versione mobile

    Avrei però la necessità di nascondere, nella versione mobile, 1 o 2 colonne... che nella versione desktop contengono banner pubblicitari

    Non sono molto esperto di CSS, anzi conosco le basi direi

    Il CSS per la versione desktop ovviamente esiste già
    Dovrei realizzare quello per la versione mobile

    Secondo le esigenze esposte sopra, quale sarebbe il metodo migliore per nasconder/eliminare i div laterali (che contengono banner nella versione desktop) per la versione mobile?

    Mi date qualche dritta?
    Grazie
    Ciao

  2. #2
    Utente Premium L'avatar di LuckyStrike
    Data Registrazione
    Jul 2014
    Località
    Roma
    Messaggi
    143
    nascondi semplicemente il contenuto dei div con parametri tipo display:none; o visibility: hidden; .......per qualsiasi cosa ricordati che il contenuto è sempre visibili per gli spider!


    html.it /pag/ 18950/nascondere-elementi/

  3. #3
    User
    Data Registrazione
    Jun 2005
    Messaggi
    227
    grazie mille per la risposta, gentilissimo

    sto pero rivalutando la situazione... il motivo principale e che quei div contengono adsense e naconderli non vorrei fosse contro il regolamento

    volendo fare un unico sito responsive invece ...posso gestire i div ad esempio con media query o no... in questo caso verrebbero eliminati o nascosti cmq

    sono un p; confuso ehehehe

  4. #4
    User
    Data Registrazione
    Feb 2012
    Località
    Brescia
    Messaggi
    13
    Per rendere un sito responsive, aggiungi un .css sotto a quello principale e sovrascrivi gli stili che realmente esistono.
    Esempio, se il .container è largo 1200px di defualt, nel .css (che probabilmente chiamerai responsive.css) ci metti

    Codice:
    @media (max-width: 767px) {
    .container {
    width: auto;
    margin: 0 10px;
    }
    }
    Width auto e non 100% perchè auto si adatta e stà largo quanto possibile (quindi mantiene i margini), con 100% + i margini ti sblubba.
    Poi continui così nascondendo elementi qua e la, fixando larghezze e quello che avanza fuori.

    Per AdSense se vuoi c'è un banner chiamato "responsive" o "auto", non ricordo bene, in pratica in base al div in cui viene messo, si adatta e mostra un banner largo se ha spazio o stretto se ce n'è poco.

  5. #5
    Utente Premium L'avatar di cosmoweb
    Data Registrazione
    Mar 2007
    Messaggi
    351
    Nascondendo alcuni div per il mobile ci potrebbero essere problemi con il SEO?

  6. #6
    User L'avatar di ggdesigner86
    Data Registrazione
    Mar 2011
    Località
    Ariano Irpino
    Messaggi
    82
    Segui ggdesigner86 su Twitter Aggiungi ggdesigner86 su Google+ Aggiungi ggdesigner86 su Facebook
    si ma solo per le ricerche mobile...che google sta provvedendo pian piano a personalizzare!

  7. #7
    Utente Premium L'avatar di cosmoweb
    Data Registrazione
    Mar 2007
    Messaggi
    351
    Quindi serp diversa per mobile?

  8. #8
    Moderatore L'avatar di MiWebDesign
    Data Registrazione
    May 2015
    Località
    Palermo
    Messaggi
    198
    Segui MiWebDesign su Twitter Aggiungi MiWebDesign su Google+ Aggiungi MiWebDesign su Facebook Aggiungi MiWebDesign su Linkedin
    Ciao dufresne, per nascondere modificare i DIV o altri elementi da Mobile devi applicare delle media query al tuo CSS, oppure fare il riconoscimento dello user-agent dell'utente (tramite Javascript o PHP) ed applicare nuove regole on-site. non c'è bisogno di caricarne uno a parte.. Poi se proprio insisti puoi pure farlo.

    Con le media Query:

    // L'utente visualizza da Mobile, inserisci la condizione che se la larghezza è almeno 360px aggiungi/modifichi regole CSS esistenti.
    // Il tuo DIV ha classe .miodiv

    @media(max-width: 500px){
    .miodiv{display:none;}
    }


    Con questa sintassi dici che .miodiv, nel caso in cui si trovi su uno schermo da 500px in giù si nasconde.

    Con PHP:

    Scarichi da questo sito questa classe PHP e la includi nella tua pagina

    mobiledetect.net/

    Scrivi prima della fine del body, nella tua pagina:

    <?php

    require_once 'Mobile_Detect.php'; //includi lo script

    $detect = new Mobile_Detect; // crei l'oggetto



    // Any mobile device (phones or tablets).

    if ( $detect->isMobile() ) {

    echo '<script>$(".miodiv").remove();</script>'; //rimuovi tramite il riconoscimento PHP il div con jQuery

    }

    ?>


    con jQuery:


    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/ZuneWP7/i) ) {
    $(".miodiv").remove();
    }

    Diciamo che la strada più semplice è CSS, molto più veloce! Ma in alcune occasioni potrebbe servirti un controllo più preciso oltre alla risoluzione!

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.