8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スマホ向けサイトで横向きNGにする

Posted at

iOSではorientationがあるがAndroidは使えない
http://caniuse.com/#search=orientation

ってことでresizeとloadイベントに横幅と縦幅をチェックするのをいれる。

$(window).on("load resize",function({
    if(window.innerHeight < window.innerWidth)
      alert("本サイトは横向きでは正常に動作しません");
})

とすると一見よさ気だが、なんとAndroidではキーボードを出力された時に画面サイズがその分小さくなってしまう。
画面内inputやtextareaに関して、入力中は上記アラートを出させないようにチェックを走らせるのもいいが、URLをタップした際にも同じように画面サイズが小さくなり、しかもbody内でないのでチェック出来ない。。。

ということで苦肉の策だが、画面のWidthが一定数以上ある場合のみチェックする事でAndroidのキーボード出力時をカバーした。

$(window).on("load resize",function({
	if(($(window).height()<$(window).width())&&($(window).width()>450))
	alert("本サイトは横向きでは正常に動作しません");
})

めでたしめでたし・・・?

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?