Bootstrap ipad nicht wie mobile

Ich habe gerade eine einfache Navbar und ich sah auf meinem Handy und es sieht einfach normal aus: http://prntscr.com/dbjxgd, (die mobile Version) Aber auf meinem iPad mini 2 sieht es aus wie die Desktop-Version, die aussieht so: http://prntscr.com/dbjxpe Was verursacht das? Ich möchte nur, dass mein iPad die mobile Version anzeigt. Kannst du mir helfen? Hier ist ein Code i verwendet, wenn u es braucht:Bootstrap ipad nicht wie mobile

Code: index.HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Servicepunt Detailhandel Groningen | Home</title> 
<link rel="shortcut icon" href="images/favicon/favicon.ico" type="image/x-icon"> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/style.css"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="js/script.js"></script> 
</head> 
<body> 
<body> 
<!-- NAVIGATIE BALK --> 
<nav class="navbar navbar-default" role="navigation"> 
<!-- logo --> 
<div class="navbar-header"> 
    <!-- --> 
    <a class="navbar-brand" href="index.php"> 
    Logo 
    </a> 

    <!-- Inklappbaar ding als je op mobiel zit--> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 

<!-- menu eitems linker kant--> 
<div class="collapse navbar-collapse" id="mainnavbar"> 
    <ul class="nav navbar-nav navbar-right"> 

    <li class="active"><a href="index.php">Home</a></li> 
    <li><a href="paginas/Over/index.php">Over</a></li> 
    <li><a href="paginas/Nieuws/index.php">Nieuws</a></li> 
    <li><a href="paginas/Contact/index.php">Contact</a></li> 

    <!-- Dropdown --> 
    <!-- 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Profiel</a></li> 
      <li><a href="#">Instellingen</a></li> 
     </ul> 
    </li> 
    --> 
    <!-- <li><button type="button" class="btn btn-primary btn-lg raised">Niet beschikbaar</button></li> --> 
    </ul> 


    <!-- Aan de rechterkant --> 


</nav> 

<!-- EINDE NAVIAGTIE BALK--> 
HOME 



</body> 
</html>

Code: style.css

textarea { 
font-family: "Verdana"; 
resize: none; 
width: 400px; 
height: 50px; 
} 

label { 
font-weight: normal; 
} 
input { 
font-weight: normal; 
} 

.navbar-default { 
background-color: white; 
box-shadow: 20px; 
padding: 15px; 
border-radius: 0; 
border: none; 
font-size: 25px; 
-webkit-box-shadow: 0 5px 3px -2px #999; 
    -moz-box-shadow: 0 5px 3px -2px #999; 
     box-shadow: 0 5px 3px -2px #999; 
} 

.navbar-header{ 
right: auto; 
} 

.navbar-nav > li{ 
} 

.navbar-default .navbar-brand, 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: black; 
    font-size: 30px; 

} 

.navbar-default .navbar-nav > li > a { 
    color: black; 
} 

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: black; 
    opacity: 0.5; 

} 

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: black; 
    background-color: transparent; 
} 

.navbar-default .navbar-text { 
    color: #FFF; 
} 

.navbar-default .navbar-toggle { 
border-color: none; 
} 

.icon-bar { 
} 

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: lightgrey; 
} 

.navbar-default .navbar-toggle .icon-bar { 
    background-color: blue; 
    width: 40px; 
    height: 5px; 
    border-radius: 20px; 

} 

.navbar-collapse { 
border: 0px; 
} 

.navbar-default .navbar-collapse { 
color: #e7e7e7; 
} 

.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
border-color: transparent; 
box-shadow: none; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
color: blue; 
}

Ich hoffe, ihr mir dabei helfen können.

Quelle

2016-11-25 Rainier Laan

versuchen, diese

@media (max-width: 1200px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
}

und für ipad Verwendung unter Medienabfrage Ziel mehr detaild here

/* ----------- iPad mini ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 1 and 2 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 3 and 4 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

}

Quelle

2016-11-25 09:06:58 Rahul

Es funktioniert, aber das erweitert es nur. Jetzt zeigen Leute mit einer kleineren Auflösung als 1200 die mobile Version. Ich möchte, dass Leute mit einem Laptop den Desktop zeigen, aber wenn sie auf einem mobilen Gerät sind, um das Handy zu zeigen? Ist das mit Bootstrap überhaupt möglich? Ich bin ziemlich neu, also weiß ich nicht viel –

Ja, was Sie sagen, ist möglich. Sie müssen für Ipad spezifische Medienabfragen verwenden. Sie können viele von ihnen hier finden: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Aslam

Es funktioniert im Hochformat. Im Landscape-Modus ist es nur die Desktop-Version. Aber wenn Sie es mit Mediaqueries tun, sagt es einfach, dass, wenn Ihr Bildschirm kleiner als 1200 Pixel ist, es die mobile Version zeigt. Ich weiß nicht, ob einige Laptops kleiner sind als das? Aber wenn ich die Medienabfrage mit dem 1200px mache, bekommt die Person mit dem kleinen Laptop die mobile Version zu sehen. Gibt es vielleicht einen anderen Weg? Es ist in Ordnung, aber ich möchte etwas sicherer, wenn Sie wissen, was ich meine –

Du selbst irgendwelche CSS-Code hinzufügen müssen nicht verweisen. Sie müssen die Bootstrap-Version mit Ihrem aktualisierten Haltepunkt herunterladen.

gehen zu: http://getbootstrap.com/customize/#grid-system und ändern Sie die @ grid-Float-Breakpoint auf die Breite Sie Ihre navbar wollen zusammenzubrechen. Sie können einen beliebigen Wert in Pixel eingeben. benutze @ screen-lg-min oder irgendwas anderes.

Und dann klicken Sie auf den Compile and Download Button am unteren Rand.

Quelle

2016-11-25 09:14:26 Aslam

Bootstrap ipad nicht wie mobile

Antwort

Verwandte Themen