レスポンシブルウェッブデザインでタブレットを縦にした場合の縮小表示

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

レスポンシブルウェッブデザインでサイトを作成した際、横1000ドット以上でサイトを構築した場合において、タブレットを縦方向で閲覧すると768ドットしかない機種ではサイト右側が描画されず、ページの縮小表示をしても白紙になることがわかりました。
これを回避するためのスクリプトを作成いたしましたので公開します。
以下のJavascriptタグをhead部に配置してください。
<script type=”text/javascript”>
$(function() {
var agent = navigator.userAgent;
if(( window.innerWidth > 650 ) &&(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
$(window).bind(‘resize load’, function(){
$(“html”).css(“zoom” , $(window).width()/1100 );
} );
}
});

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る