スマートフォンブラウザの幅にピッタリ！コンテンツ幅を合わせちゃうjQuery

トップ＞制作・開発＞スマートフォンブラウザの幅にピッタリ！コンテンツ幅を合わせちゃうjQu…

2013-12-02

スマートフォンブラウザの幅にピッタリ！コンテンツ幅を合わせちゃうjQuery

こんにちは、フロントエンドの、のりこです。

『スマホやタブレットでも見れるようにしたいんです。』
という要望は昨今、珍しくなくなってきました。
むしろ定番(；一_一)

スマートフォンの場合はPCとは違って、各端末の解像度がバラバラでも、

コンテンツの幅がピッタリ♪

になるようにjavascriptで仕込まなきゃなりません。

viewportじゃアカンのん？

viewportで width=device-width を指定すればいいじゃな～い？という説もありますが、Androidで上手く行かない場面に直面してしまいました。Σ(ﾟдﾟ|||)ｶﾞｰﾝ

さらにAndroidならこれでピッタリになるよ！とたまに紹介されている target-densitydpi=device-dpi などを指定しようものなら、リンク先がえらいことになったりします。
Σ(ﾟдﾟ|||)ｶﾞｶﾞｰﾝ

参考記事：viewportのtarget-densitydpi=device-dpiで、ひどいことが起こった[x-fit – クロスフィット -]

今回、お世話になった記事

今回は 続：Androidブラウザでviewportのwidth指定[to-R]
で紹介されているスクリプトを改変し、さらにスマホを回転させたときにリサイズイベントを何回も繰り返してしまう過剰反応を抑制するのに リサイズイベントのパフォーマンスチューニング[次世代WEB研究開発] の記事を参考に仕上げました。

jQueryを使用していますので先に読み込まれるようにしておいてくださいね。

htmlとcssについて

今回、メディアクエリーを使ってブラウザ幅が、
480px以下・481px～768px以下・それ以上
の場合で別々の設定が読まれるようにしています。
<body>直下に<div id=”content”>がある想定です。

#content { 
width:960px; 
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
#content {
width: 640px;
}
}
@media screen and (max-width: 480px) {
#content {
width: 480px;
}
}

javascriptのソース

//端末判定
myBr = 0;
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0  && navigator.userAgent.indexOf('Mobile')  > 0)) {
myBr = 1;	//スマホの場合myBr=1
}
$(function(){
if (myBr == 1) {
// ロード時
$(window).bind('load', function(){
spReSize();	//ウィンドウリサイズ
});
// スマホ回転時のリサイズ（回転時に何度も読まれてしまうのでディレイを設け処理を軽減）
var queue = null, // キューをストック 
wait = 300; // 0.3秒後に実行の場合 
window.addEventListener( 'resize', function() {
// イベント発生の都度、キューをキャンセル 
clearTimeout( queue );
// waitで指定したミリ秒後に所定の処理を実行 
// 経過前に再度イベントが発生した場合
// キューをキャンセルして再カウント 
queue = setTimeout(function() {
spReSize();	//ウィンドウリサイズ
}, wait );
}, false );
}
});
function spReSize() {
var portraitWidth,landscapeWidth;
var fitWidth = $("#content").width();	//コンテンツの幅を決めている要素の幅を取得
if($(window).width()<960){
if(Math.abs(window.orientation) === 0){
if(/Android/.test(window.navigator.userAgent)){
if(!portraitWidth){
portraitWidth=$(window).width();
}
}else{
portraitWidth=$(window).width();
}
$("html").css("zoom" , portraitWidth/fitWidth );
}else{
if(/Android/.test(window.navigator.userAgent)){
if(!landscapeWidth){
landscapeWidth=$(window).width();
}
}else{
landscapeWidth=$(window).width();
}
$("html").css("zoom" , landscapeWidth/fitWidth );
}
}else{
$("html").css("zoom" , 1 );
}
}

スマートフォンの解像度は新機種が出るたびにどんどん高くなっていくもので、ルンルン気分でメディアクエリーを使ってスマートフォン用～タブレット用～PC用のcssを作ってドヤッ！！！って表示するとスマートフォンやのに解像度高すぎてタブレット用のページが表示されとるや～ん！！！！！みたいな事態が起こります。Σ(ﾟдﾟ|||)ｶﾞｶﾞｶﾞｰﾝ
zoom値の計算についてなのでzoom値を、今表示されているcssのコンテンツの幅を取得して計算しようというのが趣旨です。