viewportを編集してタブレット端末でPCサイトを表示させたかった時のメモ

実際に使ったコード

スマホ時はスマホ用の表示、pcとタブレットはPCの表示をさせたときの表示

<?php if(is_mobile()): //スマートフォン向け表示 ?>
<meta name="viewport" content="width=device-width">
<?php else: //PCとタブレット向け表示 ?>
<meta name="viewport" content="width=1120">
<?php endif; ?>

「viewport」はそもそもスマートフォン用の表示を制御するためのモノなので、PC・タブレットを表示する際は「width=1120」だけで足りる。

スマートフォン用のviewportの指定の記述は他にもあるんだけど、上記の記述は最小限の記述
他の指定に興味あれば読み進めて参考にしてください。

※「is_mobile()」は以下の記事を元に作った「PCとタブレット」「スマホ」を切り分ける関数です。

viewportに指定できるやつ

width=device-width（横幅指定するやつ）

スマホ端末・ブラウザの幅に合わせていい感じにサイトを表示させる指定
スマホ用サイトを表示するうえで必要な指定。

初期値「980」（980px）

viewportを何も指定しないでスマホでサイトを見ると「980px」でサイトが表示される。（なので指定しましょう。）

initial-scale=1（初期倍率）

スマホサイトの表示を何％で表示する？って初期設定やつらしい。
「1＝100%」で画面ぴったしにいい感じで表示する。

だから

「initial-scale=2（200%）」って指定したらテキストや画像が2倍で表示されて横スクロールでるし

「initial-scale=0.5（50%）」って指定したらテキストや画像が半分に縮小されたサイトが表示される

また、設定しなくても「width=device-width」が入ってれば暗黙的に「initial-scale=1」を指定してるのと変わんないらしい。
だからviewportの指定は「width=device-width」だけでいいっぽい。

minimum-scale=1（最小倍率）とmaximum-scale=1（最大倍率）

上の初期倍率「initial-scale=1」の最小・最大倍率の範囲を指定できる。

最小倍率：
初期値「0.25」
範囲「0~10」

最大倍率
初期値「1.6」
範囲「0~10」

ちなみに、最小・最大倍率を「1（100%）」に設定すると「initial-scale=2（200%表示）」を設定しても「maximum-scale=1（最大倍率）」が効いて200%表示できなかった。

//　×　最小最大倍率指定されてるから200%表示できない
	

//　○　最小最大倍率の指定外せば200%表示効く

user-scalable=yes（ズームさせるかさせないか）

スマホでズームさせるかどうか指定するやつなんだけど、iphoneのsafariでこの指定にかかわらずズームはできるようになったので、もうほとんど記述しない。
「user-scalable=no」にしても効かないからね。

初期値「yes」（ズームできる）

target-densitydpi（いらない）

これ指定するとchromeで警告：『The key “target-densitydpi” is not supported.』って出るんだが!?
古いAndroid端末用の設定らしいけど、もう指定する必要はないっぽい

//　×　警告出る（いらない）
target-densitydpi=device-dpi

height=device-height（縦幅指定するやつ）

「width=device-width」の縦バージョン、使ったことがないので使い道がわからない。

200px〜10000pxで設定できるみたい。

まとめ

viewport調べてみたけどスマホのviewportは

で十分ですわ。

でもデバイス全部調べられたわけじゃないから
安定とるなら

のが安心かなー

まぁ、僕は攻めますが。