• D
    User Attivo •

    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

    0
  • L
    User Attivo •

    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/

    0
  • D
    User Attivo •

    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

    0
  • H
    User •

    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

    
@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.

    0
  • C
    User Attivo •

    Nascondendo alcuni div per il mobile ci potrebbero essere problemi con il SEO?

    0
  • G
    User •

    si ma solo per le ricerche mobile...che google sta provvedendo pian piano a personalizzare!

    0
  • C
    User Attivo •

    Quindi serp diversa per mobile?

    0
  • M
    Moderatore •

    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!

    0
Effettua l'accesso per rispondere