画面サイズで分岐したい

  • 解決済 d.w.c

    (@dwc-1)


    7年、 2ヶ月前

    PC・スマホ共通のサイトで、現在の画面幅が縦長か横長か読み取る分岐を作りたいと考えています。

    iPhone（Android）サイトで縦向き横向きを判定する2つの方法(javascript)
    http://mori-coding.blog.jp/archives/6498961.html
    を参考に

    《magazine.js》
var isLandscape = function(){
	if (window.innerHeight > window.innerWidth) {
		$("body").addClass("portrait");
		$("body").removeClass("landscape");
	}else{
		$("body").addClass("landscape");
		$("body").removeClass("portrait");
	}
}
$(window).resize(function(){
	isLandscape();
});
isLandscape();

    を作成し、

    《functions.php》
wp_register_script('magazine', get_template_directory_uri() .'/js/magazine.js','','',true);
wp_enqueue_script('magazine');

    を追記しましたが、動きません。

    jsファイルの書き方で参考サイトに書いていない基本的なルールとか、functions.phpの書き方ミスなどありますでしょうか？

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    7年、 2ヶ月前

    こんにちは

    magazine.js は jQuery に依存しているので、エンキューするときに jQuery のハンドル（jquery）を指定したほうがいいかと思います。

    wp_register_script( 'magazine', get_template_directory_uri() . '/js/magazine.js', array( 'jquery' ), '', true );

    また、WordPress の jQuery では $ ショートカットが使えないので、$ を使用する場合は下記のようにします。

    jQuery(function($) {
（省略）
});

    あと、単純に縦横比だけの判定であれば、CSS のメディアクエリ orientation でもいいかもしれません。

    @media only screen and (orientation: landscape) {
	/* 横長 */
}
@media only screen and (orientation: portrait) {
	/* 縦長 */
}
    トピック投稿者 d.w.c

    (@dwc-1)

    7年、 2ヶ月前

    @ishitaka

    ありがとうございます！

    jQuery(function($) {
（省略）
});

    を追記することでjsが動くようになりました。

    あと、orientationを使用する方法でも望みの動作をすることがわかりました。
    こちらのほうが処理が単純そうなので、こちらを使う方向で進めていこうと思います。
    本当に助かりました！

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「画面サイズで分岐したい」には新たに返信することはできません。