WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

viewportの変更

デモ
http://efu.sakura.ne.jp/web/viewport/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iPadで見た場合viewportを変更</title>
  <meta name="viewport" content="width=device-width,user-scalable=no">
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="content">
  <h1>CONTENT</h1>
  </div>
</body>
</html>
@charset "utf-8";

body {
  width: 100%;
  max-width: 2000px;
  min-width: 1200px;
  margin: 0 auto;
  background: #FEDFE1;
}

.content {
  width: 1200px;
  height: 3000px;
  margin: 0 auto;
  background: #B5495B;
}

h1 {
  padding: 50px 0;
  text-align: center;
  color: #FFF;
  font-size: 32px;
  letter-spacing: 0.4em;
}
$(function(){

  if(navigator.userAgent.indexOf('iPad') > 0) {
    document.querySelector("meta[name='viewport']").setAttribute("content", "width=1200px,user-scalable=no");
  }

  //jQueryで書き換え
  // if(navigator.userAgent.indexOf('iPad') > 0) {
  //   $("meta[name='viewport']").attr('content', 'width=1200px,user-scalable=no');
  // }

});

関連記事
mmmmofu.hatenablog.com