viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定する方法 DAD UNION

viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定する方法をご紹介します。

Contents

iPadでアクセスした時だけviewportの最小幅(width)を設定するCSSの記述
iPadでアクセスした時だけviewportの最小幅(width)を設定するHTMLの記述
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するJavaScriptの記述
viewport-extra.jsを使ってiPadでアクセスした時だけviewportの最小幅(width)を設定するデモページ
ソース元：Viewport Extraで手軽に縮小表示

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>