スマホデザインで回転をさせたくない時に使えるテクニック

公開日: : 最終更新日:2015/08/08 副業で稼ぐ仕組みの作り方

スマホデザインを作成する際に横向きの事は考えず作ってしまった場合に使えるテクニックをご紹介させて頂きます。

はじめに

ホームページでは特に気にしなくても良かった事なのですが、スマホは横幅を考えてcssを作らなければいけません。
ただ、回転させてホームページを見る人も少ないが、横向きのcssを作るのも面倒だと言う人にお勧めのテクニックです。

注意事項

アイフォンでは確認がとれましたが、アンドロイドでは確認出来きておりません。

回転について

まず、スマホの回転をcssやJavaScript、htmlやphpなどで制御する事は出来ません。
ユーザーが自分の端末の設定をして「回転させない」と言う設定をしない事には回転禁止や回転させないと言う事は出来ません。
そこで、私がネット上で見つけた方法はアラートを表示させると言うテクニックです。

アラートを表示させよう

アイフォンでは縦に持っている時や横に持っている時などを検出する機能がついているので、横を向いた時に「縦向きで持ってよー」って事をアラート表示させる事で縦向きで持つように促す事が出来ます。

やり方は簡単です。

ヘッダーにこちらの情報を記載するだけで導入する事が出来きます。

<script type="text/javascript">
window.onorientationchange = function () {
 switch ( window.orientation ) {
  case 0:
   break;
  case 90:
   alert('画面を縦にしてくださいね');
   break;
  case -90:
   alert('画面を縦にしてくださいね');
   break;
 }
}
</script>

回転させてみよう

では、実際に回転させるとどういった表示になるのかご紹介いたします。

まず普通に縦持ち時はこのような表示になります。

 

IMG_2312

そして、横向きにするとこういった表示になります。

IMG_2313

このようにアラートを表示させる事で縦で見るよう促す事が出来ます。

但し、問題としては横向きのまま、OKボタンを押してしまうと

IMG_2314

このように横向きのまま見る事が出来てしまうのです。

現状ではスマホで回転禁止にする場合はこのやり方が一番有効だと思うので、また解決方法が見つかり次第ブログで報告させて頂きます。

デモを作成したよ

もし分かりにくければ一度デモのソースを確認してみて下さい。

横向きにするとアラートが表示されるデモ

以上でスマホデザインで回転をさせたくない時に使えるテクニックのご紹介を終了致します。

さいごに

効率化を考えるなら是非取り入れたい

スマホ用のデザインを考える際に回転した時の事も考えてレスポンシブデザインを作成する方も多いでしょう。
ただ、横向きのデザインの事まで考えるとなると縦向きの際のパターンでもアイフォンの4~6まで全て違う横幅なのでそれぞれに合わせて作る場合、非常に面倒ですよね。

例えば画像を横並びに2つ並べるデザインを考えた場合、全体のレイアウトを考えると、どうしてもアイフォン4とアイフォン6では表示される横幅が違ってくるため、それぞれのデザインで確認しながら1px単位で作らなければいけませんよね。

特に稼げる副業でアフィリエイトサイトを作りこんでいる人の場合は特に注意が必要になります。

そう考えると、横向きも作らないといけない場合は純粋に仕事量が倍にになってしまうので、出来れば横向きのデザインは作成したくないなって思い、このテクニックを取り入れました。

今現在情報弱者じゃない限りはもともとスマホでの回転禁止の設定をしている人が多いと思うので、そこまで気にする事もありませんが、念のためにやっておきたいですよね。

広告

関連記事

カスタムフィールドで入力したfeed情報を表示させる方法wordpress

ポータルサイトを作成する際に各店舗のブログ記事の新着情報を表示させたいなぁって事ありますよね?できち

記事を読む

ワードプレス全体にパスワードをかけるPassword Protected

特定の人だけにホームページやブログを見せたいなぁっと考えている方、ステキなプラグインを発見しました。

記事を読む

amazonのインスタントストアの商品登録方法

前回紹介したAmazonインスタントストアでの商品登録方法の紹介 はじめに Amazonイン

記事を読む

アクセストレードの登録方法

アクセストレードの登録方法です。 はじめに 副業でアフィリエイトをしたい方で色々なASP

記事を読む

ワードプレスでお問い合わせを作る。Contact Form 7

ホームページの制作やブログの制作で必ず必要なのがお問い合わせフォームの設置です。ワードプレスのプラグ

記事を読む

ECCUBE3の商品CSV登録が簡単でした

毎回トラブルがあるCSV登録ですがECCUBE3では結構すんなり登録が出来ました。 はじめに 商

記事を読む

bxsliderの画像を中央揃え出来る簡単な方法

bxsliderを導入したものの画像が左側に寄ってcssで戻せない・・・ はじめに レスポンシブ

記事を読む

さくらサーバーにドメインを移す【移管方法】準備

ドメインを初めて移す方は不安ではありませんか?今回はさくらサーバーへの移管方法を詳しく説明させて頂き

記事を読む

ECキューブで販売する為の最低限の設定その1

ECキューブをインストール後に最低限しておかないといけない設定です。長くなりそうなので今回はその1と

記事を読む

no image

アフィリエイトだと気付かせないリンクのつけ方

商品や情報を探していた時にアフィリエイトのURLだと気が付いた時ってわざとそのコードを外してアクセス

記事を読む

広告

Message

広告

現在の総記事数: 288件

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

yahooリスティング広告のキーワード単価を調べる方法

そのキーワードにいくら支払えばクリックが見込めるのかわかりやすツールで

yahooリスティング広告の広告費の決め方

広告費用って毎月いくら必要なのか?いろいろなパターンを考えてみました

yahooリスティング広告のキーワードを設定する際の考え方

yahooリスティング広告のキーワードを間違えると全然効果がないので気

yahooリスティング広告らくアドの利用方法

yahooリスティング広告の使い方がわからない方はらくアドを利用してみ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑