iPhoneやAndroidのスマートフォン端末やiPadのタブレット端末の特長を活かしてWebサイトを縦・横でデザイン・レイアウトを切り替えたいときに簡単に実現できる方法を紹介。
javascriptを使わずに縦長なのか横長なのかを判別してスタイルシートで切り替えることができます。
縦で持っている
外部スタイルシートの場合<link rel="stylesheet" media="all and (orientation:portrait)" href="tate.css">
スタイルシート内に記述する場合
@media screen and (orientation:portrait) {
body { color: #000; }
}
横で持っている
外部スタイルシートの場合<link rel="stylesheet" media="all and (orientation:landscape)" href="yoko.css">
スタイルシート内に記述する場合
@media screen and (orientation:landscape) {
body { color: #ff0000; }
}