スマホの向きを判定してレイアウトを変える

デバイスの向きを判定するには「orientation」というプロパティになります。

//縦向きの場合
@media screen and (orientation:portrait){
  p {font-size: 1em; }  
}
//横向きの場合
@media screen and (orientation:landscape){
  p {font-size: 1.2em; }  
}

portraitは縦向き、landscapeは横向きとなります。縦と横でCSSを切り替えることができます。

コメントを残す