2
私はちょうど簡単なnavbarを作って私は私の携帯電話を見て、これはちょうどこのように普通に見える：http://prntscr.com/dbjxgd（モバイル版）しかし、私のiPad mini 2では、このようなもの：http://prntscr.com/dbjxpe これは何が原因ですか？私はちょうど私のiPadモバイルバージョンを表示したい。みんな助けてくれますか？ここでuはそれを必要とする場合、私は使用されるいくつかのコードは次のとおりです。ブートストラップipadはモバイルのように表示されません
コード：て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>
コード：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;
}
私はあなたたちはこれで私を助けることができると思います。
これは機能しますが、それだけでそれを拡張します。今や解像度が1200より低い人はモバイルバージョンを表示します。ノートパソコンを持っている人にデスクトップを見せてもらいたいのですが、モバイルデバイスを使ってモバイルを見せたいのですか？これはブートストラップでも可能ですか？私はかなり新しいので、私はあまり知りません –
はい、あなたが言っていることは可能です。 Ipadに固有のメディアクエリを使用する必要があります。それらの多くをここに見つけることができます：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Aslam
これはポートレートモードで動作します。ランドスケープモードではデスクトップ版です。しかし、あなたがメディアクエストでそれを行うならば、それは単にあなたの画面が1200ピクセルより小さく、それがモバイル版を表示すると言います。私はいくつかのラップトップがそれより小さいかどうか分からないのですか？しかし、もし私が1200pxのメディアクエリーをしたら、その小さなノートパソコンを持っている人はモバイル版を見ることができます。多分別の方法がありますか？そのように大丈夫ですが、私が何を意味するかを知っていれば、より安全なものが欲しいです –