ウインドウの幅に応じてタグを追加したり内容を変更したりする方法について考えていきます。12月10日記事
目次
PC画面ではたくさんの情報を表示したいのに対し、スマートフォンではそんなに情報を表示したくない時があります。
そんなとき、状況応じて色々と処理を変えていく場合を考えていきます。
ウインドウ幅を取得するメソッドは$(window).width();で取得できます。それを変数に入れて、その変数をif文で判定して、タグやphpの処理内容を変えていきたいと思います。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
//$(window).resize(function() {//これだと変更した時にしか表示されないので、loadしたときにも表示されるように以下のように変更する。
$(window).on('load resize', function() {
var win_width = $(window).width();
//console.log(win_width);
if (win_width >= 600) {
$('#WidthArea').html('<span>600px以上ですよ。<?php echo 6; ?></span>');
} else if (win_width >= 400) {
$('#WidthArea').html('<span>400px以上600pxより小さいですよ。<?php echo 4;?></span>');
} else {
$('#WidthArea').html('<span>400pxより小さいですよ。<?php echo 3;?></span>');
}
});
});
</script>
<title>jQueryで画面サイズの幅毎にタグを表示や非表示</title>
</head>
<body>
<div>
<p>ここは横幅がどんな風でも表示</p>
</div>
<div id="WidthArea"></div><!--ここだけ幅に応じて変えていきたい。 -->
<div>
<p>ここも横幅がどんな風でも表示</p>
</div>
</body>
</html>
onメソッドを使って、ロード(load)したときと、横幅を変更したとき（resize）の関数(function)を実行させます。
※この記事と関係はないですが、スクロールしたときは(scroll)と書きます。
まず、横幅を取得し、win_widthという変数に代入し、その値に応じてif文を書いていきます。
以上
