スマホ化　スマホではスマホ表示、iPad・PCではPC表示する方法【CSSメディアクエリ（@media）】

 

スマホではスマホ表示、iPad・PCではPC表示する方法（横向きでもスマホはスマホ表示、iPadはPC表示です。）

js

jQuery(document).ready(function(){

  var ua = navigator.userAgent;
  if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
  // スマホのとき
  $('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1.0">');
  }else{
  // PC・タブレットのとき
  $('head').prepend('<meta name="viewport" content="width=1300, maximum-scale=1.0, user-scalable=yes" />');
  }

});

 

css

iPad・PC対応のところは下記の中に記述

@media screen and (min-width:737px) {

}

スマホ対応のところは下記の中に記述
@media screen and (max-width:736px) {

}

 

category cloud