ビューポートを使用してモバイルフレンドリーなウェブサイトを作成する

Question

I'm working on a website for a small festivalフレンドですが、私は流動的レイアウトなしでモバイルブラウジングに取り組んでいます。それは、私が古典的なビューポートスクリプトを使用したいので、モバイルデバイスがそれに来るときに最小ズームになるようなウェブサイトです。私もこの方法を試してみましたが、私が今持っているものだ

HTML

<meta name="viewport" content="450, initial-scale=1, maximum-scale=1"> 

。

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

モバイルデバイスのサイトにアクセスするたびに、ズームインされてロゴのみが表示されます。

私は間違っていますか？

また、私が電話で見たときに気づいた2つの他のものがあります。 フッターの背景色は、全幅にわたって伸びません（デバイス幅または幅= "XXX"の場合も同じです）。しかし、私のフッタの幅は100％です。私はここで何が起こっているのか分かりません。

私はパッディングやコンテンツの左右にスペースを入れようとしているので、ウェブサイトはウィンドウの横にまっすぐに置かれていません。私は左右にスペースが必要です。私はこれをHTMLタグに入れようとしましたが、それは左側にのみ適用されます??

私はhttps://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.htmlと他のウェブサイトに行きましたが、これらのケースで何が起こっているのか理解できません。

助け、アドバイス、指示、指導は非常に高く評価されています。背景の問題は、これを追加してみてください修正するには

Answer 1

：

body { 
     min-width: 1024px; 
} 

あなたはあなたが問題を持っていない理由である明示的な幅（960ピクセル）の入った容器、内部のページの一番上のセクションを持っていますそれら。ただし、フッターは、明示的な幅の設定なしでは単独で使用されます。また、同じdivに、あなたがページの残りの部分で使用したid 'container'で囲むこともできます。

パディングの問題も修正する必要があります。コンテンツコンテナに追加していることを確認してください。たとえば、

ズームの問題は、iPadまたはiPhoneでは表示されません。あなたはどんな流動性や反応性もしていないので、これはあなたが使用すべきものです。 initial-scale = 1が行っているのは、画面に合わせるのではなく、実際の幅に拡大することです。

<meta name="viewport" content="width=device-width"/> 

Androidに関する問題については、Android ignores maximum-scale when using fixed-width viewport meta-tagをご覧ください。私はテストするのに便利なAndroidデバイスを持っていないので、私はその部分に間違った情報を与えたくありません。