viewport指定でスマホキャリアによって横サイズがフィットしないときの最終手段



PCサイトをスマホでも見れる様にというリクエストがよくあります。
iPhone(iOS)・Androidでviewportの指定を行えば良いとは分かってるのですが
特にAndroidのキャリア別でどうもPCサイト幅(900pxとか950pxとか)が
スマホのブラウザに上手くフィットしてくれない時があります。

考えられる原因として

  • 自分がviewportの指定やクセに詳しく無い。
  • そもそも確認用のスマホキャリア(種類)が手元に無い。
  • 種類(キャリア)でviewportの指定を振り分けるのが面倒。
  • でも、やっぱり本当に各キャリアのブラウザ毎でviewport指定が、現状まちまちな仕様ではないだろうか。

そんな時はJavaScript先生を使って、
スマホやタブレットの場合のみ以下の処理

$(window).bind('resize load', function(){
$("html").css("zoom" , $(window).width()/950 );
});

※上記950はPCサイトの幅サイズを指定します。
で、とりあえずやっちゃいます。

 
最終的にPCサイトはスマホで見るとちょっと…
ってなってスマホは振り分けて最適化したサイトを作ることになったり。。。