どうも、そろそろSIMフリーのスマホを買おうと思いつつ狙った端末を見つけられないでいる、よっしぃーです。
よくサイトで画面を小さくしたときに、横スクロールするとその先が白くなっている
なんてことがあったりなかったり。
私はそうならない対策として大きいモニタのときだけwidthを指定しています。
ただ、これをやるとタブレットの時にタブレットの画面より大きく表示されたりして難儀になっちゃうんですよね。わざわざ普通の表示にするのに縮小するのは嫌ですよね。
こうなる原因は<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>だったりするわけです。
レスポンシブ対応するために入れるんですが、これはサイトの表示領域を画面に合わせますよって意味で、width指定したものが画面幅より大きいとはみ出てしまいます。
まぁどういうことかというと、サイトの大きさをそのままに、画面にぽいっとおいた感じですね。
PCサイズを携帯で見るとはみでますよね(´・ω・)
なので、そうならないために表示の幅をサイトに合わせることで（縮小することで）はみ出さずに表示させます。
例えばサイト幅1040なら、<meta name=”viewport” content=”width=1040″>みたいな
でも、これでやるとタブレットはいいんですがスマホで見るときPCのままだったり。。。
そこでjavascriptで制御しちゃおう、となりました
var ua = navigator.userAgent;
var spView = 'width=device-width, initial-scale=1.0';
var tbView = 'width=1040';
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0))
{
$('head').prepend('<meta name="viewport" content="' + spView + '">');
}
else if(ua.indexOf('iPad') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('A1_07') > 0 || ua.indexOf('SC-01C') > 0)
{
$('head').prepend('<meta name="viewport" content="' + tbView + '">');
}
コピペでも大丈夫です。(使うにはjQueryが必要です)
width=1040をサイト幅の数字に変えましょう。
htmlにviewportを記述してくれるので、htmlのヘッダには何も書かなくてOKです。
簡単に言うと、端末によって<meta name=”viewport” content=”ココが変わるよ！”>ってことですね。
と、まぁここまで割りと無理やりな感じですすめましたが、一番いいのはタブレットでもスマホでも大丈夫なようなレスポンシブサイトにすることですね。
私がこれを使ったのがスマホのときだけ対応する感じだったので、こういう形になりました。
もしかしたら「こんな事しなくてもだいじょうぶだよー。」、っていう場合もあるかもしれませんが、もし見つけたら紹介しようかと思います。
コメントする