WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

ユーザーエージェントでスマホ用にviewportを切り替える

$(function(){
  var contentWidth = 750;

  var iphone = navigator.userAgent.search(/iPhone/);
  var android = navigator.userAgent.search(/Android/);
  var ipad = navigator.userAgent.search(/iPad/);
  var ipod = navigator.userAgent.search(/iPod/);

  if(iphone != -1 || ipod != -1 || ipad != -1) {
    var min_scale = Math.round( ( screen.width / contentWidth ) * 10000 , 5 ) / 10000;
    var max_scale = Math.round( ( screen.height / contentWidth ) * 10000 , 5 ) / 10000;
    var _viewport = '<meta name="viewport" id="viewport" content="width=' + contentWidth + ', minimum-scale=' + min_scale + ', maximum-scale=' + max_scale + ', user-scalable=no">'
    $("head").prepend(_viewport);
  } else if (android != -1)  {
      $("html").css("zoom" , $(window).width()/contentWidth);
      $(window).on('resize', function(){
        $("html").css("zoom" , $(window).width()/contentWidth);
      });
      $("head").prepend('<meta name="viewport" content="initial-scale=0.5,width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">');
    }
});

640pxや750pxくらいに収まるようなデザインにする。

contentWidthにスマホで見せたい横幅を入れる

関連記事

mmmmofu.hatenablog.com