タグ

viewportに関するmauttyのブックマーク (3)

  • スマートフォン向けサイトの作り方 | ユージック

    スマートフォン向けサイトの作り方 2011年1月22日 iPhoneAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn

    スマートフォン向けサイトの作り方 | ユージック
  • スマートフォンサイト制作 » スマフォサイトの基礎 viewport

    スマフォサイトへの第一歩 viewport viewportについて説明します。viewportを設定しないことにはスマフォサイトの制作が始まりません。 viewportって? viewportはウィンドウのサイズのようなものです。初期値はなんと横幅980pxに指定されています。スマートフォンの第一人者であるiPhoneの横幅は320pxですから約3倍の幅が指定されています。そのため図のように表示されてしまいます。なんとも文字が小さくて見にくいです。 viewportを指定してみる viewportで横幅を320pxに指定してみると図のようになります。文字の大きさはちょうどPCで見るのと同じぐらいの読みやすいサイズになりましたね! なぜviewportを指定するのか? 開発しやすいからです!開発はPCで行います。プレビューもPCで行います。PCでのフォントサイズの見栄えとスマフォでの見栄え

  • Untitled — width=device-width, initial-scale=1についてぐちゃぐちゃと

    追記:「場合によって」とかが文章中に抜けてるくさい なんだか言いたいことをまとめられてないし、ちょっと書いてるうちに間違った書き方してるとこもありそうな感じでぐちゃぐちゃになっちゃったけど、なんとなく雰囲気はわかりそうなとこまではあるし、あとからもうちょっとずつまとめるってことで、これはこれで悩んだ形跡としてポストしちゃっとく。 Appleはそもそも、日でのスマホ向けページみたいなやつは想定してないんだよ。多分。 PCのサイトふつーに表示できるのに、わざわざスマホ向けのページ別に作って管理やら運用やらをカオスにする必要ないじゃん。 っぽいもので、Appleが想定してるのは Web application page。 Webアプリならスマホ向けっての全然あり。  でもWebアプリでなくても、アプリって拡大なんてしないでしょ? 拡大しないで幅変えるだけ 。 だから、日でいうスマホ向けページ

  • 1