レスポンシブだけど、iPad(タブレット)ではPCの縮小表示にしたい。
最近、けっこうそれがスタンダードになってきている気がします。
僕は基本WordPressなので、phpでviewportを場合分けしていたんですが、稀にphpが使えない場合はjQueryを使っていました。
ところが、jQueryも使わない、というか、場合分けすら使わないめっちゃシンプルな書き方がありました。
その書き方が、こちら。
この方法はviewportというより表示されているものを縮小して表示させる方法のため、$(window).height();など、高さを取得するときにうまくいかないことがあります。その場合は、素直にjQueryを使ってviewportを出し分けましょう。jQueryを使った方法は、最下部に追記しました。
実装
まず、<head>内のviewportをこう書きます。
1 |
<meta name="viewport" content="width=device-width"> |
おそらくいつもスマホ向けに書いているであろう以下の記述
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
から、”initial-scale”を消しただけ。
あとは、cssでbodyにmin-widthを指定し、スマホ用のブレイクポイントで、min-widthを解除します。
こんな感じ
1 2 3 4 5 6 7 8 |
body { min-width: 1040px; } @media screen and (max-width: 750px){ body { min-width: initial; } } |
これでうまいこと、iPadではPC表示(最初からちゃんと見れる)、スマホではスマホ向けのスタイルが適応されます。
jQueryを使ってviewportを出しわける場合
ユーザーエージェントを判別し、iPadの場合はviewportを固定幅にする方法。
上記方法が使えないときはこっち
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var ua = navigator.userAgent var sp = ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) var tab = !sp && ( ua.indexOf('iPad') > -1 || (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) || ua.indexOf('Android') > -1 ) if (tab) { $('meta[name="viewport"]').attr('content','width=1040') } |
ではでは、圧倒的シンプルなコーディングライフを!
在宅フリーランス。本業のWeb制作をやりながら、ブログを書いたり絵を描いたりネットショップを運営したりと、割と好きなことをやりながらのんびり生きてます。
Twitter→@zeroichi69
Twitterではブログの更新通知をしたり、しょうもないことをつぶやいたりしてます。