スマートフォンサイト 6-07 表示サイズ調整の要となるViewportの設定 スマートフォンやタブレットでは、画面サイズも解像度も2倍以上の開きがあり、これまでのPCのノウハウをそのまま使うことができない。ここでは、表示サイズ調整の要になるdpiスケーリングとViewportについて見てみよう。 解説／馬場孝夫（ビヨンド・パースペクティブ・ソリューションズ株式会社） BROWSER iOS…5over　Android…2.2over マルチデバイス対応に必須な画面サイズ調整 従来のPC 向けサイトでは、ディスプレイサイズや解像度に極端な差はなく、幅1024px・96dpiなど固定値をターゲットにして問題なかった。しかし、スマートフォンやタブレットが普及してきた現状では、固定値だけで対応はできなくなっている。その対応策として挙げられるのが、dpiスケーリングとViewportである。 dp

「PCはFlashを使用してリッチな動画コンテンツに。ただ、スマートフォンでも簡単な動画は見せたい。」 最近は制作の際、このようなオーダーが増えている。ただ、PCと共通したソースで動画を実装するには、いろいろなブラウザ状況を考慮しなければならない。ユーザーによってはJavaScriptやFlashをオフにしている場合があるからだ。 そのようなユーザーに対しても、代替 要素を表示させ、コンテンツ欠如を避ける対策も行う必要がある。 大きく分けると【1】のようなパターンのときに対応が必要だ。 今回、Flash の表示にはswfobject.jsを使用する。swfobject.jsを使用すれ ば、Flashを表示させたいidを指定すると、そのid内にFlashが埋め込まれる。 JavaScriptやFlashがオフのときは、そのままid内のHTMLが表示されるので、ソースを汚さずに実装が可能、とい

スマートフォン 10 スマートフォンサイトでのViewport設定 スマートフォンでの表示設定を行うViewportのしくみについて、詳しく解説していこう。最近はスマートフォンで閲覧される機会が多いことを考慮すれば、PCサイトであっても記述しておいたほうがよい。 制作・文／制作・文／野崎侑士（ユージック） BROWSER iOS Andoroid Viewportとは Viewportは、スマートフォンでWeb サイトを表示する際の仮想的なウィンドウサイズといえる機能で、初期値は横幅980pxに設定されている。つまり、PCでブラウザを横幅980pxにして見た状態がスマートフォンの小さな画面に表示されることになる。 このため、デフォルトの状態でコーディングしただけでは、スマートフォンで見ると文字や画像がかなり小さく表示されてしまう。わかりやすい例として、【01】を見てほしい。これはViewp