ど〜も〜、エアコン耐性×系エンジニア 中尾こと、 Hawk(と呼ばれたい) です。
 
このブログをご覧のちびっこのみなさまはすでに夏休みかと思いますが、いかがお過ごしでしょうか?
昨年から新しい祝日 山の日 が制定されましたね!
お盆付近の休日は連休になりやすくとてもありがたいです!
来年は土曜日に飲まれてしまいますがね!

 
さて、みなさま普段 viewport ってどのように設定されていますか?
ほとんどの方がこのように設定されていると思います。

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

このように設定してからcssのメデイアクエリで対応するのが一般的かと思います。
自分も特に気にせず バカの一つ覚え のように使っておりました。

「そろそろ、飽きませんか?」

私は飽きてきたので、色々イジってってみました!

viewportの基本を理解しよう!

なにはともあれ何事も基本が重要です!
「viewport!viewport!!」 と連呼していますが、viewportは metaタグ の一種です。
metaタグの name属性 にviewportと宣言することでviewportを使えるようになるんです!

そしてviewportの設定は content属性 内に宣言します。
これが基本形になります!
content属性はプロパティを宣言し、値を = で設定し、, で複数設定できます。
viewportで宣言できるものを下記にまとめてみました!

プロパティ 効果
width 数値(200〜10000)もしくはdevice-width 指定した横幅で仮想ウインドウが作られる
height 数値(200〜10000)もしくはdevice-height 指定した縦幅で仮想ウインドウが作られる
initial-scale 数値(0〜10) ページ表示時のズーム率
minimum-scale 数値(0〜10) 最小倍率
maximum-scale 数値(0〜10) 最大倍率
user-scalable yes,noもしくは1(yes),0(no) ズームを許可するかどうか

最初に記述したコードだと、
「横幅はデバイスに合わせていい感じに!初期表示はズーム率1倍だからズームしないよ!」
と宣言したことになるんです!

横幅固定でsp対応!

実はこのエンジニアブログのsp版でもやっているのですが、 width=device-width ではなく width=320 と特殊な設定をしております。
これは 小さなお髭のデザイナー「iPhone5のサイズでデザインしたんだから、iPhone6でも同じように見えなきゃヤダ!!」 と駄々をこね始めたので、このように実装してみました。
この宣言をすると320pxの仮装ウィンドウが作られ、自動でズームされどんな端末でもデザインの崩れなく表示されるようになります。

例えばこんなSPでこんな画面を実装したとします。
47ab1697 ed60 4048 8da6 e647fa99514b

通常の設定のまま横向きにすると、このように表示されるかと思います。
7546c985 4323 4175 91fd 649c3561b5e0

このように中身のコンテンツの大きさはそのままで外側だけ広がる感じです。

そこで、viewportをこのように設定します。

<meta name="viewport" content="width=320">

するとこのように表示されました!
79142e52 772c 453a 87dc 0df96304f69a

中のコンテンツも横幅の比率に合わせてズームしているのがわかるかと思います。
自動ズームがかかる関係上、 initial-scale を宣言してしまうとうまくいかないので悪しからず!
また、今回は実装後に対応したため width=320 と宣言しましたが、始めからこの方法で実装することが決まっていればデザイン通り640pxで実装してから width=640 と宣言してもいいかもしれませんね!

ちなみに今回はPC,SPでテンプレートが違うので簡単に実装できました!
HTMLが共通の場合はjsで動的にviewportの書き換える方法もありますよ!

例えばこんな感じで!

document.getElementById('viewport').setAttribute('content', 'width=320');

あまり使わないheightを使ってみる!

みんな大好きメディアクエリ!
基本は横向きで使用しているかと思います。
こんな感じで!

@media screen and (min-width:500px) {
  /* 画面横幅が500px以下 */
}
@media screen and (min-width:500px) and ( max-width:1000px) {
  /* 画面横幅が500pxから1000pxまで */
}
@media screen and (min-width:1000px) {
  /* 画面横幅が1000px以上*/
}

よく使いますよね?
実は、画面の縦向きにも使用できます!
例えばこんな感じです!

@media screen and (min-height:500px) {
  /* 画面縦幅が500px以下 */
}
@media screen and (min-height:500px) and ( max-height:1000px) {
  /* 画面縦幅が500pxから1000pxまで */
}
@media screen and (min-height:1000px) {
  /* 画面縦幅が1000px以上*/
}

正直使用頻度は全然無いです(笑)
気分を変えてい時に使用してみましょう(笑)

最後に

色々検討した結果、やっぱり通常の指定が一番使いやすいですね(笑)

ただ使い所はありそうなので、みなさまも冒険してみてはいかがですか?

それでは、また〜

Shere
  • はてなブログ
  • Twitter
  • Facebook
いつもと気分を変えて?viewportの便利な使い方!

Writer

  • Name

    中尾鷹人

  • Position

    神にもっとも近いと言われていると思っている感じを出しつつ、今日も自分なりに頑張って業務をこなそうと思いながら、なかなかやる気の出ないフロントエンジニア

  • Profile

    昔々あるところにえらい神様がおりました。 えらい神様はとても残念なことがあり、洞窟の中に隠れてしまいました。 するとどうゆうことでしょう。世界が暗闇に包まれてしまいました。他の神様たちは相談し、えらい神様に洞窟から出てもらうように説得しました。なんやかんやあって、なんとか洞窟の扉を開けることに成功しました。扉を開けると眩しい光に包まれました。 すると中からえらい神様となぜかえらそうな神様が出てきました。 そのなぜかえらそうな神様がのちにフロントエンジニアとなって活躍するのは別のお話。