viewportがdevice-widthな風潮
iPhoneのサファリはフルブラウザのため、解像度が320pxの小さな画面で閲覧しても、サイトを980pxの横幅とみなした上で縮小し、パソコンで見るのと同じように表示してくれます。
けれども、文字が小さくなるなどの弊害があるため、サイトをレスポンシブ・ウェブデザインに対応する方が多くなってきているようです。
前回、当ブログも修正してみたのですが、サファリのデフォルトで980pxとして表示されるのなら、スマホを閲覧した際のレイアウトの横幅も980pxに設定し、文字も大きくすればぴったりだという考えで修正してみました。
この場合、解像度が320pxの小さなスマホの画面で980pxの大きなサイトを表示するのですから、本来ならはみ出て表示されてしまいますが、自動で縮小されるため、ちょうど良い大きさで表示されるようです。
けれども、サイト自体の表示はこれで問題なかったのですが、広告を表示させてみるとこれが非常に小さくなってしまって困ってしまいました。レイアウトの横幅を980pxとして設定しているわけですから、そこに300pxぐらいの横幅のバナー広告を貼りつけると、３分の１ぐらいに縮小されてしまうのです。
では、横幅980pxの広告を貼り付ければぴったりじゃないかと探したのですが、これも通常のウェブサイト用の素材で文字が小さくなってしまいます。世間一般のスマホ用広告はどれも300pxぐらいの横幅で設定されていますので、これを使うには再度、修正しなくてはいけなくなってしまいました。
そこで、980pxの横幅とみなすサファリデフォルトの設定を解除し、iphone解像度のデフォルトの320pxの横幅のままで表示するように設定して、そこにスマホ用の横幅300pxの広告を表示させてみることにしました。
デバイスの本来の横幅で表示させる設定は、html上に次のメタタグを設定すれば、サイトの横幅を980pxとしてではなく、iphoneデフォルトの320pxとして表示してくれます。
<meta name="viewport" content="width=device-width">
これはつまり、iponeのデバイス幅の場合だと320pxになるので次と同じ意味になるはずです。
<meta name="viewport" content="width=320">
一方、何も設定しない場合、サファリのデフォルトだと980pxなので、次と同じ意味になるはずですが、前回はこれでやってみていまいちだった次第です。
<meta name="viewport" content="width=980">
ちなみに、当のアップルのホームページでは次のように設定されています。
<meta name="viewport" content="width=1024">
こうみてみますと、980pxと1024pxでは44pxしか違わないんで、当のアップルが1024pxでやっているのなら、デフォルトの980pxのままでもいいんじゃないかなという気もするわけです。わずか44pxの違いのために、膨大な数のhtmlファイルにメタタグを追加する作業などできればしたくありません。
でも、viewportがdevice-widthな人が多くなってきており、広告掲載のことを考えるとでデバイス幅に設定するのが一番いいような気がします。ただ、initial-scaleの設定なども、アップルのホームページでは設定されてませんが、グーグルではinitial-scale=1で推奨していたりと、人によってバラバラな気もします。
この辺がよくわからないんで、スマホ会社と広告会社、あるいはＷ３Ｃとかブラウザ会社でウェブ標準な方法を出してもらいたいものです。