レスポンシブandroidで横landscapeにした時の、CSSメディアクエリーを適用させる方法
前提として、メディアクエリーでviewportの指定やmobile.cssなどは作っておいてくださいね。
↓ちなみにheadに入れるviewportの部分はこちら！
[html]<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">[/html]
Device.jsでアンドロイドでもiphoneでも縦でも横でもCSSを振り分ける方法
【 参考デモページ・demo 】
※デモはchromeの機能で見てもいいですが、androidの表示はandroid実機で確認してみてください！（＾＾）
１、device.jsをサーバーにアップする
※device.jsのダウンロードはこちら↓
device.js -GitHub
２、<head>～</head>の中に、以下のscriptを記述する
[html]
<script type="text/javascript">
$(function(){
$(window).resize(function(){
var orientation = window.orientation;
if(orientation == 0){
$("body").addClass("portrait");
$("body").removeClass("landscape");
}else{
$("body").addClass("landscape");
$("body").removeClass("portrait");
}
});
});
</script>
[/html]
※↑これは、縦や横の場合にそれに応じてクラスをつけるためのもの。
３、今回の例の場合mobile.cssに以下のように記述する。
[html]
/* PCの時だけ非表示させたい要素に適用（スマホでは表示しない） */
@media only screen and (max-width: 768px){
.hidden_xs {display:none;}
}
/* スマホの時だけ表示させたい要素に適用（PCでは表示しない */
@media only screen and (min-width: 768px){
.visible_xs_block {display:none;}
}
/*——————————————————–
モバイル用レイアウト（768px以下の解像度のスクリーン含む）
——————————————————–*/
@media
only screen and (max-width : 768px){
/* サイト全体の共通設定 */
body{
-webkit-text-size-adjust : none;
}
html{
overflow-y: scroll;
overflow-x: hidden;
}
html,body{
width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
height: auto;
max-width: 100%;
}
#container{
width:100%;/* 横幅目一杯に広げる */
}
ul{
width:100%;/* 横幅目一杯に広げる */
}
li{
float:none;/* float解除（しない） */
width:90%;/* 横幅目一杯に広げる */
}
@media only screen and (orientation:portrait) {
/* 必要に応じて記載 */
}
@media only screen and (orientation:landscape) {
li{ /* スマホを横にしたときは2列表示にさせる */
width:40%;
margin:4%;
float:left
}
}
/* ここからandoroidスマホだけの為に縦横表示切替のもの */
/* アンドロイド横 */
.android.mobile.landscape li{ /* スマホを横にしたときは2列表示にさせる */
width:40%;
margin:4%;
float:left
}
/* ここまでandoroidスマホだけの為に縦横表示切替のもの */
/*—————————————————————————-
モバイル用レイアウト（768px以下の解像度のスクリーン含む）ここまで！！
——————————————————————————*/
}
@media not screen and (1) { .page-top { position: static; } }/* Opera10以上 */
[/html]
要点のまとめ
mobile.cssの.android.mobile.landscapeの部分ですが、
初めに書いたscriptやdevice.jsを入れたことで、
htmlの先頭部分にclassが３つ付いています。
この場合、androidのクラスがついて、更にmoblieクラス、landscapeクラスが付いています。
という訳なので、
.android.mobile.landscapeの中のliに対してスタイルを書くことで、
アンドロイド携帯で横向きに見ているときだけのスタイルを適用させることが出来てしまいます！！
例）
[html]
/* アンドロイド横 */
.android.mobile.landscape li{ /* スマホを横にしたときは2列表示にさせる */
width:40%;
margin:4%;
float:left
}
[/html]
p.s.
ちなみにこの部分は、iphone適用されています。
[html]
@media only screen and (orientation:landscape) {
li{ /* スマホを横にしたときは2列表示にさせる */
width:40%;
margin:4%;
float:left
}
}
[/html]
2015.6.1 11:46 カテゴリー： WEB製作
