プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

javascriptに関するTips

2018.10.26更新

レスポンシブの際、ipadタブレットでの見切れを回避する方法

Attention!

レスポンシブなwebサイトで、PCのレイアウトのままipadなどのタブレット端末に表示を収めたい、というケースでは、コンテンツの幅が広すぎて見切れてしまうケースがあります。 それを回避するviewportの設定方法をご紹介します。

1headの中に「viewport」を設定します。
<head>

<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, user-scalable=0">');
    }else if (navigator.userAgent.indexOf('iPad') > 0) {
        document.write('<meta name="viewport" content="width=1080">');   ←ここのwidthでコンテンツ幅(実寸)を指定します。
	}
</script>

</head>

前段の、

 

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, user-scalable=0″>’); }

 

は、スマートフォンの機種幅に合わせてコンテンツを縮小させる設定です。スマートフォンの場合は、この設定のみで大丈夫ですが、

ipadタブレットには対応できず、実寸のままipadに表示されてしまうので、横幅が1080pxのコンテンツだと、9.7インチタブレットの場合にはコンテンツが見切れてしまいます。

そこで、以下を追記します。

 

else if (navigator.userAgent.indexOf(‘iPad’) > 0) {else if (navigator.userAgent.indexOf(‘iPad’) > 0) {

document.write(‘<meta name=”viewport” content=”width=1080″>’);   }

 

これで、PCで1080px幅のコンテンツをipadの機種幅に合わせて縮小表示されるようになるので、

見切れを回避できます。

トップへ