CSS3のMedia Queries（メディアクエリ）のorientation

どうも、2015年の12月中旬にスマホに変えた僕です。

スマホの縦・横で画面表示が変わるやつをどうやって判定してるんだろう？と前々から思ってはいたのですが、どうせJavaScriptとかでいろいろしなきゃならんのでしょう、と思って後回しにしていたのですが、今回、その仕組みが必要になったので調べたところ、なんとCSS3のメディアクエリなら一瞬でできるとのこと!

スマホの縦横の切り替えに対応、orientation

メディアクエリ - Web developer guide | MDNでいろいろできることが載っているようです。

orientation

値: landscape | portrait
メディア: visual
min/max 前置詞の使用: 不可

デバイスが横置き（landscape: 高さより幅が広い表示）と縦置き（portrait: 幅より高さが高い表示）のどちらのモードなのかを指示します。

スマホ縦の時

@media all and (orientation: portrait) { ... }

スマホ横の時

@media all and (orientation: landscape) { ... }

{ ... }の中にstyleを記述していけばOKです。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>CSS3のMedia Queriesのorientation</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="header">
			<h1>IE8以下はcss3-mediaqueries.jsでメディアクエリー対応に</h1>
		</div><!--#header-->
		<div id="content">
			<p>iPhone5、320pxって狭いんじゃ～、横向きにしたときログイン画面が入らんわ～、このやろ。</p>
		</div><!--#content-->
	</body>
</html>

orientationはmax-widthでサイズを指定した中に入れないとPCでも効いてしまうので注意が必要です。縦幅が640px以上あるスマホがあるのでスマホサイズのデザインの切り替えのmax-widthの値をどのくらいにするか困るところです。Bootstrapなどは、767pxでスマホサイズに切り替わるようです。

/** スマホサイズ時のcss **/    
@media screen and (max-width: 640px){    
  /** 縦向きの時のcss **/    
  @media all and (orientation: portrait) { 
    #header {
      width: 98%;
    }
    #content {
      width: 98%;
    }
  }    
  /** 横向きの時のcss **/    
  @media all and (orientation: landscape) { 
    #header {
      width: 100%;
    }
    #content {
      width: 100%;
    }
  }   
}

みたいな記述でいけるようです。

ちなみに、スマホサイズの確認をするには、デベロッパーツールの『Elements』タグの左の携帯のアイコンをクリックするとPC表示とスマホ表示の切り替えができます。

f:id:ts0818:20160403175750p:plain

Javascriptとかでも判定できるようですが、今回はこの方法で頑張っていこうと思います。

ちなみに、viewportの記述も忘れがちなので要チェックです。

<meta name="viewport" content="width=device-width,initial-scale=1">

上記のようにviewportの記述をしないと、スマホサイズにした時にPC画面を縮小しただけの見た目になってしまうので気をつけましょう。

viewportもイマイチよく分からずに使っているので勉強せねばと思う今日この頃です。

IE8以下にメディアクエリ（Media Queries）を対応するには、

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

でいけるようです。

⇩ 詳しくは下記サイトへ

・【CSS3】メディアクエリをIE7、IE8でも使えるようにする at softelメモ

・もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

今回はこのへんで。