タグ

viewportとiphoneに関するakira_maruのブックマーク (3)

  • Viewport [iPhone生活]

    *device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ(サイズ) HTMLに設置したコンテンツのサイズ ドキュメント(サイズ) 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ

  • ViewportでiPhoneの画面に合わせたサイズを指定 |

    Viewportを指定せずMobile Safariのデフォルト値を使用した場合 以下を指定したのと同じ状態になる。 <meta name="viewport" content="width=980px,initial-scale=1.0,user-scalable=yes,minimum-scale=0.25,maximum-scale=1.6" /> おすすめの設定 <meta name="viewport" content="width=divice-width" /> 横幅をdivice-widthとし、他はデフォルトのまま。 divice-widthは対象デバイスの横幅を表す。 iPhoneであれば、縦向き状態の横幅は320px。この設定を使用した場合、体を横向きにした場合でも表示領域の横幅は320pxのままになるため、1.5倍(480px÷320px)に拡大された状態で表示さ

  • こーすりゃいいかもviewport

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / スマートフォン用のviewport指定、このいずれかかと思うんだけどどうなんだろう。 リキッドパターン iPhoneの場合、縦の時:幅320px、横の時:幅480pxにviewportが調節される。それ以外の幅のデバイスでは、そのデバイスの幅に合わさってリキッドになる。 user-scalable=noなので、ユーザーによるピンチイン、ピンチアウトのズームが不可能。この時点でかなり嫌だが、これは、iOSが、縦→横にorientationさせた時、ズーム率を自動で調節するという機能を殺すため。(iPhoneであれば縦→横でズーム率が1.5倍になる) この自動ズーム率調節機能がイキでいいのであれば

    こーすりゃいいかもviewport
  • 1