はい。今ハイブリッドアプリのデザインとかやってます。
ハイブリッドアプリっていうのは、ネイティブとWEBページの複合アプリのことです。
その制作のときにviewportにつっかかってすっ転んだので、次の誰かが転ばないようにメモっておきますね。
そもそもviewportって何ですか？
それはもう色んなページに書いてあるので私が説明するよりも、それぞれのページを見てください。
すんごいざっくりいうと「画面サイズの見え方を指定する」もんだと思ってもらえるといいかもしれないですね。
そんでこの指定の仕方が実際のとこ色々とあるんですけど、スマートフォン向けサイトの制作の場合よく使われる指定方法としてはこんなかんじになります。
<meta name="viewport" content="width=device-width,initial-scale=**,minimum-scale=**,maximum-scale=**,user-scalable=no">
はい、なんのことやらさっぱりですね。
それぞれの指定の詳しいことは、他のページでわかっていただくとして、ここでポイントになってくるのは「maximum-scale」の部分だけなので、ここだけ説明します。
「maximum-scale」っていうのは「そのページを見たときの画面サイズの最大比率」のことになります。まぁここで指定したサイズで常にページが見えると思っておけばOK。
で、ここの指定が「maximum-scale=1.0」（1倍）なら何も問題はありません。問題すら起きません。大体1.0で指定している場合が多いかと思います。
でもときたまページの仕様によりけり「maximum-scale=0.7」（0.7倍）とか「maximum-scale=0.6」（0.6倍）などの数値で指定していることがあります。
そうなるとどうなるか？こうなります。
罠その1：画像素材の書き出しサイズが変わる
スマホページをデザインしている人の多くが、iPhone4の解像度（640×960）基準で制作しているかと思います。iPhone自体の画面サイズは320×480なので、要するに2倍の大きさでデザイン作っていることになりますね。
で。
「maximum-scale」が1倍ではなくて、0.7倍とか0.6倍だった場合、2倍したデザインのまま書き出してページに配置すると、デザイン画像で確認していたよりもパーツが小ちゃく見えます。そりゃそうですね。
だって画面が70％とか60％の比率で見えてるんだもの。
というわけでどういうわけかというと、例えば「maximum-scale=0.6」だった場合は切り出す画像サイズの計算式がこうなります。
実際に見せたい大きさ×2×1.4＝切り出す画像サイズ
ボタンサイズ高さ40pxのものを切り出すときには、こうなります。
40×2×1.4=112px
1.4の部分は指定されている数値によって変更してください。
0.7で指定されていれば1.3になるし、0.5で指定されていれば1.5です。
正直ものっそいめんどくさいので、できれば1倍のままでコーディングお願いしたいのですが、そうもいかない場合があるので、制作する際はコーダーさんにそこらへん確認しておきましょう。
罠その2：ネイティブ側で"Scale to fit"を有効にする
罠その1はアプリに限らずスマートフォンのWEBページならば起こりえる罠ですが、その2は100%ハイブリッドアプリでないと起きない罠です。
ハイブリッドアプリとは先ほども書いたようにネイティブとWEBの複合アプリですが、簡単にいうとWEBブラウザアプリみたいな状態ですね。
で。
先ほどと同じく「maximum-scale」が1倍ではない場合、かならずネイティブ側で設定を有効にしてもらわないと行けないのが"Scale to fit"。
ネイティブ開発にはさっぱり詳しくないので聞かれても困りますが、読んで字のごとく「指定しているサイズにあわせて表示してね」ってことですね。
デフォルトではこれが有効になっていないようなので、これが外れている状態で指定が1倍ではないページを見ると、当然のことながら表示が崩れます。
60％でいつも見ていたのものを100％で見てみたら全体的に大きくなるのは当たり前だのクラッカー。
なのでWEBだけで見たときは平気だったのに、アプリで見たら表示が変になってる？ってときは、ネイティブ側で設定を有効になっているか確認しましょう。
たまにコレでは解決しないときがあるようなのですが、そのときはこっちのページが参考になるっぽいですよ。※この方法使ったことないので細かいことはわかりません。
以上viewportでハマった2つの罠でした。
スマートフォンWEB制作まだまだひよっこなので、もりもり制作して知識ためていきたいところです。
