web-dev-qa-db-ja.com

「初期スケール= 1.0」で混乱-iPhone 3GS vs 4

Webサイトをモバイルデバイス用に正しくスケーリングするのに問題があります。

最小幅が640px、最大幅が何であっても設計されているサイトがあります。私は現在メタタグを持っています：

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

さて、私が混乱しているのは、「initial-scale = 1.0」を使用すると、明らかにサイトが1：1にスケーリングされ、iPhone 3Gで不安定に見えることです（サイトの半分しか見えません）。現在、iphone 4（640px幅の解像度）では、「initial-scale = 1.0」を使用すると、640pxで正しくスケーリングされます。

または、グラフィックスが480pxの場合、3Gにはscale = .667が必要で、iOS 4には1.3が必要ですよね？

では、どのようにしてサイトをエッジ間で完全に適合させることができますか？ブラウザはデバイスの幅を検出し、それに応じてスケールを設定できますか？さまざまなデバイスの幅がたくさんあります... Android、古いiphone、ブラックベリーなど。

かなりイライラする:(私は私がすでに知っておくべき重要な何かを見逃しているように感じます。

編集 'initial-scale'メタタグは、ビューポートを基準にサイトをスケーリングしている必要があるようです。次に、width = device-widthを使用して、実際のビューポートサイズを設定します。

私が持っているように見える問題は、ビューポートがデバイスに合うようにスケーリングされていないことです。使用するタグに関係なく、640pxのままです。ここで何が欠けていますか???

htmlmobilecss
16
Jonathan Coe

わかりました。基本的には。

私のデザインは実際にはビューポート（一種）のサイズの2倍なので、重要なのは「初期スケール= 0.5」を使用することだけです。両方のデバイス（3Gと4）で正しく機能し、Androidデバイスなど）でもほぼ正しく機能します。

ちょっとトリッキーで、これを行うにはもっと良い方法があるはずですが、とりあえずはうまくいきます。

入力を提供してくれたすべての人に感謝します。

8
Jonathan Coe

元のメッセージの主な問題は、セミコロンがiPhone 4以降で機能しないように見えることです。区切り文字としてカンマを使用する場合のみ機能します（またはデバイス幅の設定のみ）。他のブラウザはより耐性があるようです。

以下は私にとって確実に機能します：

<meta name="viewport" 
      content="width=device-width,initial-scale=1,maximum-scale=1" />

本文とドキュメントを水平方向にスクロールできないようにすることもできます。

body, html
{    
    overflow-x: hidden;        
}

Mozillaサイトの詳細情報へのリンク：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

12
Rick Strahl

「幅」は、100％ズームでのウェブサイトの幅をブラウザに伝えることです。 Webサイトを滑らかに設計した場合、ここで「device-width」を指定できます。レイアウトはビューポートの幅に合うように設計されているため、ブラウザーはズームを使用する必要はありません。

「初期スケール」は、一部のデバイスのデフォルトの動作をオーバーライドして、Webサイトを拡大または縮小して、Webサイトの幅（上で指定したもの）が画面の幅と一致するようにします。これを1に設定すると、基本的には「ズームしないでください。私のウェブサイトが画面に対して広すぎる場合はスクロールバーを使用し、狭すぎる場合は横に空白スペースを残してください」と表示されます。ウェブサイトを画面の幅に正確に合わせたい場合は、初期スケールを使用しないでください。

9
londonwebguy

答えは、常に640ピクセルにサイトを拡大縮小するようにWebブラウザに指示したいということだと思います。ユーザーがサイトを拡大縮小する機能をオフにして、浮遊ドラッグによってすべてのサイズが変更されないようにします。

これを試して：

<meta name="viewport" content="width=640; user-scalable=no;" />
7
profMobi