viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定する方法をご紹介します。
Contents
iPadでアクセスした時だけviewportの最小幅(width)を設定するCSSの記述
※ブラウザ幅768px(iPadサイズ)の時bodyタグをmin-width: 1000pxしました。必要に応じて変更して下さい。
<style type="text/css"> body{ text-align: center; margin: 0; padding: 0; } h1{ text-align: center; font-size: 32px; padding: 20px 0; line-height: 1.4em; } .wrap { background-color: #cccccc; } @media (min-width: 768px) { body { min-width: 1000px; } } </style>
iPadでアクセスした時だけviewportの最小幅(width)を設定するHTMLの記述
※デフォルトのviewportは以下で設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
※必要に応じて変更して下さい。
<div class="wrap"> <h1>iPadでアクセスした時だけviewportの最小幅(width)を設定する方法</h1> </div>
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するJavaScriptの記述
※viewport-extra.min.jsファイルを読み込みます。ページにアクセスした端末がiPad(タブレット)端末かどうかを判定しiPad(タブレット)端末の場合、ViewportExtra.setContent({ minWidth: 最小幅 })を設定します。
<script src="viewport-extra.min.js" defer></script> <script> document.addEventListener('DOMContentLoaded', function() { // タブレット端末かどうかを判定 var ua = navigator.userAgent var isSmartPhone = ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) var isTablet = !isSmartPhone && ( ua.indexOf('iPad') > -1 || (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) || ua.indexOf('Android') > -1 ) // タブレット端末でのみ最小幅を設定 if (isTablet) ViewportExtra.setContent({ minWidth: 1000 }) }) </script>
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するデモページ
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するデモページ
ソース元:Viewport Extraで手軽に縮小表示
以下がソース元です。
iPadにPC向けデザインを縮小表示するときにも!Viewport Extraで手軽に縮小表示
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告