2011-07-26 4 views
0

私はhtml5を実験していて、友達のサイトをほぼ完成させました。私はPaul Irishのhtml5定型文をテンプレートとして使用しています。これはiPhoneで見るまでうまくいきます。この時点で、サイトの左側は縁にぴったりと合っています。私はいつものようにマージン:0オートにサイトをラップするコンテナを設定しましたが、何らかの理由でそれを中央に留まらせることができません。iphoneにウェブサイトが左揃えで表示されますか?

これはなぜ起こっているのでしょうか?ここで

は、サイトへのように、現在の..です

http://cynonvalleypals.co.uk.s88828.gridserver.com/

あなたは幅と余白の右に設定してみてください、あなたに

+0

FWIW、Androidのシミュレータでうまく見えます。 – Ryan

+0

私はiPhone上で問題を取得しています..アンドロイドでそれをテストしていません..しかし、私に知らせるための感謝:) – Owzzz

答えて

0

ありがとう:autoおよびマージン左:オート(ありません右、オート)あなたがmetaタグを介してビューポートを設定している

Check it

+0

これを試して..まだ整列したまま:( – Owzzz

1

:マージンを使うのか?

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

これは、iPhoneがコンテンツを980pxではなく320pxの幅で表示しようとしていることを意味します。 320px幅のChromeウィンドウでウェブサイトを開いた場合に表示される画像を想像してみてください。それはあなたがモバイルサファリで得るものです。

これは簡単にデバッグできます。 Chromeウィンドウを開き、デベロッパーツールを使用して本文の幅を320ピクセルに設定します。結果が表示されます。この設定に基づいて調整することも、他のビューポート設定を使用することもできます。

+0

私はその宣言を取り出し、あなたはそれをあなたの最後に見ますか?私はまだここにそっくりに残っているのを見ています... – Owzzz

+0

問題は '#Kite'と' footer'です。あなたのページを980px幅のクロムに入れると、あなたのChromeのウィンドウが980ピクセル幅のとき、 'body'は980ピクセル幅で、'#container'は中央にあります。しかし、「フッター」は1300ピクセル幅なので、ページ全体が拡大されます。 –

1

このようにしてビューポートを使用しようとすると、あなたに役立つことを願っています。

<meta name="viewport" content="width=1040; user-scalable=no;" /> 

これで幅は1040に固定されますが、ユーザーは拡大表示できません。ユーザがコンテンツをズームできるようにするためにユーザスケーラブル= 1を追加することができます。

関連する問題