私はstackoverflowでこれらの質問をたくさん読みましたが、それが再発する問題であることを知っています. ほとんどの人は通常、<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1>
タグを見逃しています。これは私の場合ではありません。phonegapとjquery mobileでアプリを作っています...
これは、次のようなブレークポイントを持つ私の css ファイルです。
/* independent of size */
.ui-bar {
height: 20em;
}
.ui-grid-a.ui-block-b {
width: 66%;
}
/* small screen */
@media all and (max-width: 62em) {
.responsive.ui-grid-b.ui-block-a, .responsive.ui-grid-b.ui-block-b, .responsive.ui-grid-b.ui-block-c, {
padding: 0;
border: 0;
float: none;
min-height: 1px;
}
.responsive.ui-grid-b > :nth-child(n) { width: 100% }
.responsive.ui-grid-d > :nth-child(n) { width: 100%; margin-bottom: 2em }
}
/* big screen */
@media all and (min-width: 63em) {
.responsive.ui-grid-b.ui-block-a, .responsive.ui-grid-b.ui-block-b, .responsive.ui-grid-b.ui-block-c, {
padding: 0;
border: 0;
float: none;
min-height: 1px;
}
.responsive.ui-grid-b > :nth-child(n) { width: 33% }
.responsive.ui-grid-d .ui-block-a { width: 19.95% }
.responsive.ui-grid-d .ui-block-b { width: 59.95% }
.responsive.ui-grid-d .ui-block-c { width: 9.95% }
.responsive.ui-grid-d .ui-block-d { width: 9.95% }
.responsive.ui-grid-d .ui-block-c .desc-body {
float: right;
}
.responsive.ui-grid-d .ui-block-d .desc-body {
float: right;
}
.responsive.ui-grid-d .ui-block-c h3 {
text-align: right;
}
.responsive.ui-grid-d .ui-block-d h3 {
text-align: right;
}
}
レスポンシブ クラスのすべての要素は、これらの変更に応答するはずです。html ファイルを実行するとブラウザーで動作するようになりましたが、シミュレーターまたは iPhone デバイスで実行すると、ページに css が表示されません。なぜそうなのですか?
これが私のhtmlの頭です:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/responsive.css"/> <!-- my css file -->
<script src="js/jquery-1.9.1.min.js">
</script>
<script src="js/jquery.mobile-1.3.0.min.js">
</script>
<script type="text/javascript" src="cordova-2.5.0.js">
</script>
</head>
デバイスでレンダリングされない要素の例。
<div class="ui-grid-d responsive"> <!-- here goes responisive -->
<div class="ui-block-a">
<h3>Date</h3>
<hr>
<div class="desc-body">Some text...</div>
</div>