もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

2015/06/10 816 users Qiita width content 呪文 解像度

<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。... 続きを読む

スマートフォン対応でよく使うhtml、css、javascriptのまとめ | 69log

2013/02/15 897 users CSS HTML JavaScript ウェブアプリ iOS

スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 ■headタグ内での設定 <!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!... 続きを読む

これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ

2013/02/14 1141 users HTML 見た目 web 使い勝手 煮ブログ

スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewpor... 続きを読む

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

2011/01/22 1903 users ユージック iPhone height 作り方 ズーム

iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン独自の仕様 viewportについて スマートフォンでの可視領域やズームなどの設定をするmeta要素がviewportです。 viewportの各プロパティ width(幅) 可視領域の幅。デフォルト値は980px。 200pxから10000pxまでの範囲を指定できる。 height（高さ... 続きを読む