Blogger, custom navbar και smartphones

rafinos · 21 Ιανουαρίου 2014

Γεια σας έχω ένα blog στο blogger (αυτό της υπογραφής μου) και έχω το εξής θέμα...

Έχω φτιάξει ένα custom navbar αλλά θέλω να εμφανίζεται μόνο όταν κάποιο μπαίνει από υπολογιστή γιατί δεν μπορεί να λειτουργήσει σωστά από φορητές συσκευές (tablets, smartphones)...

Υπάρχει τρόπος να απομονώσω τον κώδικα και τον εμφανίζω μόνο στα pc;

***Το έχω απευθείας στο πρότυπο γιατί ως widget έχει κάποια θέματα αλλιώς θα ήξερα τι να κάνω...

τελικά κατάφερα να το κάνω windget αλλά μου αυξάνει το χρόνο φόρτωσης της σελίδας οπότε αν κάποιος ξέρει πως μπορώ να το κάνω με τον αρχικό τρόπο ας μου πει...

SlackulatoR · 22 Ιανουαρίου 2014

Δοκίμασε αυτό το javascript τρικ:

if ($(window).width() < 480 || $(window).height() < 480) {
//small screen, load other JS files
$.getScript('/js/script.js', function () {
//the script has been added to the DOM, you can now use it's code
});
}

Και κάτι ίσως πιο σωστό:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

// some code..
}

Crawl_From_Death · 22 Ιανουαρίου 2014

Ενας ακομα πιο σωστος τροπος θα ηταν με χρηση CSS

@media screen and (min-width: USER MINIMUM WIDTH ΣΕ EM) and (max-width: USER MAXIMUM WITH ΣΕ EM) {

}

Ενα παραδειγμα για αναλυσεις εως 534px πλατος

@media screen and (min-width:0em) and (max-width:33.313em) {
      .your_menu_class {
           display: none
      }
}

Αν θελεις να μετατρεψεις τα pixel, για τα οποια θελεις να κρυβεις αντικειμενα απο το site, σε em μπες στο Site: pxtoem.com

Επιπλεον μην ξεχασεις να συμπεριλαβεις στον κωδικα πριν το κλεισιμο του <head> την εντολη

<!--[if lt IE 9]>
<script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Αυτος ο κωδικας κανει συμβατη την χρηση mediaqueries σε ΙΕ 7 και 8. Δεν το εχω δοκιμασει σε 6 αν και θα ηταν ασκοπο.

Καλη συνεχεια.

rafinos · 22 Ιανουαρίου 2014

Ξέρω ότι με το css είναι ο πιο σωστός τρόπος... αλλά σε landscape της οθόνης του κινητού γίνεται η ζημιά οπότε...

Crawl_From_Death · 23 Ιανουαρίου 2014

Ε τοτε θα κανεις το εξης:

ορισε σε ενα αρχειο οτι η κλαση του μενου σου εχει display: none και ορισε οτι για οθονες πχ απο 700px και ανω θα γινεται block. Στο δειχνω και με κωδικα (700px minimum width)

@media screen and (min-width:43.750em) {
     .your_menu_class {
          display: block;
     }
}

rafinos · 23 Ιανουαρίου 2014

Ωραίος!!!

Το έκανα

Θα το αφήσω έτσι και ότι γίνει...

Σύνδεση

Blogger, custom navbar και smartphones

Προτεινόμενες αναρτήσεις

rafinos

SlackulatoR

Crawl_From_Death

rafinos

Crawl_From_Death

rafinos

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση