Androidの一部機種でmeta[viewport]を無視する問題
Androidの一部機種でmeta[viewport]を無視する問題の検証 - jsdo.it Galaxy Nexus(Android version 4.0.4)なんらかのタイミングで拡縮が可能になる。 （Orientation Change Eventとmeta[name=“viewport”]のcontentを書き換えるのが関係してる？） P-07D(Android version 4.0.4)Orientation Change Eventが一度でも発生すると以後拡縮が可能になる。 （Orientation Change Eventが発生していない状態なら拡縮はできない） F-05D(Android version 2.3.5)以下のいずれでも常に拡縮が可能 （user-scalableを使った拡縮不可設定ができない） user-scalable=1 user-scalable=
![Androidの一部機種でmeta[viewport]を無視する問題](https://cdn-ak-scissors.b.st-hatena.com/image/square/4cd25ecf2f86d106674d1f2272ac5084feef73d1/height=288;version=1;width=512/https%3A%2F%2F64.media.tumblr.com%2Favatar_2f83831cb352_512.pnj){kind=avatar}
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
幽霊飛行船: WebViewでviewportサイズを指定する。
AndroidのWebViewで画面幅を640px固定にするため、HTMLヘッダに <meta name="viewport" content="640px" /> と記述してもはその通りに表示してくれません。 解像度等によって、表示サイズは機種ごとに異なってしまいます。 WebViewで以下の設定を行う必要があります。両方必要。 Webview.getSettings().setLoadWithOverviewMode(true); webview.getSettings().setUseWideViewPort(true); ついでに、ほかの設定は以下の通り。 スクロールバーを表示しない。 webview.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY); JavaScriptを有効にする。 webview.getSettings
Viewport [iPhone生活]
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ（サイズ） HTMLに設置したコンテンツのサイズ ドキュメント（サイズ） 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
