こんにちは！やっと風邪に勝利した岩間です。
さて、今回と次回にかけて、設定したJavaScriptを紐解きながら解説していきます！
前回の記事をまだ読んでいない方は併せてどうぞ！
>>なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第1回/全3回）
表示領域をスマホごとに合わせる
○その1 ページ全体を画面に合わせる
ページ全体が縮小されてしまうため、スマホ用にViewportを設定します。
スマホごとに違う画面幅に合わせるため、meta要素を追加しました。
<meta name="viewport" c>
width=device-widthで画面幅に合わせ、initial-scale=1でページの倍率を指定しています。
これで、スマホページでも綺麗に表示することができました！
○その2 タブレットだけ表示領域を固定する
タブレットでPCページを表示すると、一部のコンテンツが画面からはみ出てしまいました。PCページをタブレットの画面幅で表示するのは少し難しいようです・・・。
でも、崩れているのはタブレットだけなのでmeta要素自体は変えたくない！
何かいい方法はないかと調べてみると、要素の中身だけを切り替えられるコードを見つけました！
そのコードを参考に設定したJavaScriptを早速解説していきます。
今回の目的は、タブレットだけViewportを切り替えることです。
タブレットでは、PC表示でのコンテンツサイズに合わせて表示させたいと思います。
変数を作って必要なものをいれていく
まずは分岐させるのに必要な変数を設定していきます。
ここでの式は左辺と右辺は等しいという意味ではなくて、左辺に右辺を代入するという式なので注意が必要です！
var spWidth = '小さいスマホのサイズ';
var tbWidth = '大きいスマホのサイズ';
var maxWidth = 'タブレットのサイズ';
var spView = 'スマホで表示するための設定';
var tbView = 'タブレットで表示するための設定';
表示を切り替えるコードを書いていく
今回は、画面を横に倒したときにもjQueryが実行されるようにイベントを設定しました。
この中に、「もし○○の時△△を実行し、□□の時は××を実行する」という分岐を以下の内容で設定します。
- 画面幅がtbWidthより小さい時、ViewportをspViewにする
- 画面幅がmaxWidthより小さい時、ViewportをtbViewにする
$(window).on('orientationchange resize',function(){
if /* 1 */( tbWidth > screen.width ){
/* 処理 */$('meta[name=viewport]').attr('content',spView);
}
else if /* 2 */(maxWidth > screen.width){
/* 処理 */$('meta[name=viewport]').attr('content',tbView);
}
}).trigger('resize');
実際に切り替えてみると、meta要素が書き換わって綺麗に表示できるようになりました！
○まだ不具合が・・・
スマホとタブレットで表示領域を切り替えたことによりどの端末でも綺麗に見られるようになったと思いきや、タブレットを横にしたときに余白ができてしまいました。
この余白はなんだ？？？
よく見てみると、タブレットを横にしたときは画面幅がコンテンツサイズより大きくなっていることに気がつきました！
確かにサイズを固定してたら拡大されないですよね・・・。盲点でした・・・。
一応綺麗に見えてはいるけれど、ちょっと気になります；
そこで、タブレットが横になったときはPCで見るのと同じ表示になるようにコードを追加してみました！
/*最後の分岐に追加*/
else if(maxWidth < screen.width ){
$('meta[name=viewport]').attr('content',spView);
}
これでどんなスマホでもタブレットでも綺麗に表示できるようになりました！
恐らくもっと簡単かつ良い方法もあるかと思いますが、端末ごとに設定することで私にはわかりやすい書き方ができたと思います(^o^)
次回はAutoHeightの設定を、cssの設定も併せて解説していきます！
第1回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第１回/全３回）
第3回：なるべく沢山のスマホ・タブレットで、快適に見られるレイアウトの実現（第３回/全３回）
