モバイル端末のみ表示させるjs

javascript関連
2018年4月4日

サイトのアクセスページなどで地図を掲載した場合、PCでの閲覧時は画面がある程度大きいので問題ないが
モバイル端末の場合は地図が見づらいので、端末の地図アプリでも開らけるように、「地図アプリで開く」ボタンを
設置したい。
その場合、モバイルの時だけ（大きさに関わらず←ここ重要）ボタンを表示させて、PCの時は表示させないという方法が
あったので覚書。
早良路窯　總山法律事務所

/* map-apps  */
$(function(){
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf('ipad') !== -1 || userAgent.indexOf('iphone') !== -1 || userAgent.indexOf('Android') !== -1 ) {
		$('#map-apps').addClass("on");
	}else{
		$('#map-apps').removeClass("on");
	}
});

参考にさせてもらったサイトはこちら

さらにモバイル端末以外に適応させたいjavascriptもやってることはほぼ同じなのだが、ちょっと書き方違うので覚え書き。

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
$(function() {
	$('#navi span').css({ 
		width: $('#navi .active').outerWidth(),
		left: $('#navi .active').position().left 
	});
	$('#navi a').mouseover(function(){
		$('#navi span').stop().animate({
			width: $(this).outerWidth(),
			left: $(this).position().left}
		,'fast');
	});
	$('#navi a').mouseout(function(){
		$('#navi span').stop().animate({
			width: $('#navi .active').outerWidth(),
			left: $('#navi .active').position().left}
		 ,'fast');
	});
});
}

これは總山法律「事務所サイトのナビゲーション部分。
アンダーバーがマウスオーバーで追随するスクリプトなのだが、モバイルでは一回タップしないとリンク先に飛ばない状態になったので、
ここはモバイルの時はstylesheetのみで対応するように、スクリプトをモバイル端末では実行しないようにしている。

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここにPCのみ実行させたい処理
}

↑ここが肝心。

最初のスクリプトもやってることは同じなので、どちらでも問題ないと思うが總山法律事務所サイトでは両方を使っている。

PAGE TOP