【WEBデザイン】PHPでスマホの横向きを判定する方法(JavaScript使用)
スポンサーリンク

こんにちは、静岡県浜松市でフリーのWEBデザイナーをしています、こたです。
レスポンシブデザインで忘れてはいけないのが、スマホを横向きにしたときにデザインの調整をすることです。
CSSやJavaScriptで横向きに対して発火する設定はできます。
そこで思ったのが、PHPで同様の対応は可能かということを疑問に抱きました。
今回は簡潔ですが、調べた内容をご紹介いたします。

結論

PHPはサーバーサイドのスクリプト言語であり、クライアント側のデバイスの状態にアクセスすることはできません。
なのでPHPだけではスマホの横向き対応は不可能でした。

ただし、JavaScriptを使用してクライアント側のデバイスの状態にアクセスし、それをPHPに送信することができました。

以下は、JavaScriptを使用してスマートフォンの向きを検出し、PHPに送信する例になります。

JavaScript

<script>
function checkOrientation() {
  var orientation = window.orientation;
  switch(orientation) {
    case 0:
      return "portrait";
    case 90:
    case -90:
      return "landscape";
  }
}

var orientation = checkOrientation();
// PHPに送信する
window.location.href = "your-php-file.php?orientation=" + orientation;
</script>

PHP

<?php
$orientation = $_GET['orientation'];
if($orientation == 'portrait') {
  // スマートフォンは縦向き
} else {
  // スマートフォンは横向き
}
?>

このように、JavaScriptでスマートフォンの向きを検出して、それをPHPに送信することで、スマートフォンが縦向きか横向きかを判定することができます。
JavaScriptが必須となるので、わざわざPHPを使用しなくてもいいのでは?という疑問はありますが、もし誰かのお役にたてば嬉しいです。

 

 

こんなお悩みありませんか?
  • 実店舗の宣伝のためにホームページがほしい!
  • サイトをリニューアルしたい
  • スマホでも綺麗にサイトを表示したい
  • 予算が少ないからきちんと制作してもらえるか不安
  • ネットでの集客は成果が上がるのかわからない

そのお悩み全て解決します!

集客できるWebサイトをお求めやすい価格で制作します!

・個人だから他のWeb制作会社よりも圧倒的に安い!

・お客様に寄り添った完全オーダーメイド

お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。

一緒に素敵なWebサイトを作りましょう!

スポンサーリンク
おすすめの記事