ブログトップ 記事一覧 ログイン 無料ブログ開設

Web関連あれこれ このページをアンテナに追加 RSSフィード

2016-10-04

iPadで端が切れたり余白できたり。。スマホとiPadでviewport設定をjsで振り分ける

| iPadで端が切れたり余白できたり。。スマホとiPadでviewport設定をjsで振り分けるを含むブックマーク iPadで端が切れたり余白できたり。。スマホとiPadでviewport設定をjsで振り分けるのブックマークコメント


スマホはレスボンシブ、iPadはPC画面縮小表示したい。
そんな訳で実装する為に

↓この3つについてご説明します。
・レスボンシブサイトのviewport設定
・PC表示をそのまま縮小する為のviewport設定
・デバイスによってviewport設定を振り分ける

レスボンシブサイトのviewport設定

まずこちらから。
表示画面サイズの設定は、content=widthの値をどうするかですが、

Googleが推奨する設定に縮小はさせない設定の↓こちらがスタンダードです。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">


・幅を各デバイスのサイズに合わせる(width=device-width)
・初期設定は等倍表示(initial-scale=1.0)
・縮小はさせないようにする(minimum-scale=1.0)

ちゃんとメディアクエリも効いている。

ただ。。。
iPadだと端が切れる。。(涙)

iPadのviewport設定

PC表示をそのまま縮小したい時は、
content="width=910"(910はサイトの幅です)とすれば良いです。
(「px」など単位はつけない事!)

↓こんな感じですね。

<meta name="viewport" content="width=910,initial-scale=1.0,minimum-scale=1.0">


↑で無理ならcssで↓こちらの記載あるか確認

html,body{
    width: 100%;
}



iPadの表示OK!!

ところが。。。
スマホのレスボンシブが効いてない。。
バカでかい表示になってしまっている。。

viewport設定をjsで振り分ける

んじゃ、PC&iPadとスマホでviewport設定を分ければいいじゃん。

って事で↓こんな感じで設定しました。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        //iPhone、iPod、Androidの設定
        document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">');
    }else{
        //それ以外(PC、iPadなど)の設定
        document.write('<meta name="viewport" content="width=910,initial-scale=1.0,minimum-scale=1.0">');
    }
</script>


*iPhone、iPod、Androidの場合はデバイスサイズに合わせ(device-width)、
それ以外(PCとiPad)の時は幅910を保つ(iPadはPCの画面そのまま縮小)


ちなみに、上記はcontent=width以外の設定がスタンダードですが、
個人的にはユーザーがズームできる↓こちらで作成してます。

<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,user-scalable=yes,maximum-scale=2">');
    }else{
        document.write('<meta name="viewport" content="width=910,user-scalable=yes,maximum-scale=2">');
    }
</script>





▼参考サイト
https://www.re-simpleinc.com/viewport-iphone6/
http://ichimaruni-design.com/2015/01/viewport/
http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607