JS でデバイス判定して viewport 設定 - Web

スマホでは width=device-width を指定し、それ以外ではwidth=1200（最低表示させたいサイズ）を指定

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
  document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
} else {
  document.write('<meta name="viewport" content="width=1200">');
}
</script>

if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');

} else {

document.write('<meta name="viewport" content="width=1200">');

}

</script>

コンテンツの min-width は例えば 960pxとかになっていて、タブレットでは PCと同じ（min-width: 960px）で表示させたい時など。

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

コメントはこちらから コメントをキャンセル

コメントはこちらからコメントをキャンセル