モバイルデバイスのウェブサイトの埋め込みを設定する

このウェブサイトは少し前に完成しましたが、何かが起こってしまい、バックアップが正しく行われなかったため、一日中それを修正してゼロから戻しました。私はこのテクニックを何の問題もなく他の多くのウェブサイトでやっているので、それが何をしているのか分かりません。モバイルデバイスのウェブサイトの埋め込みを設定する

Here is the website。私は画面の100％で暗い灰色のバーを必要としていたので、それはどこにあっても常にバナーの下にあるので、私はちょうど1つのコンテナを持っていない左と右側にいくつかのスペースを入れたいです。だから私はスペースを持っている4つの "div"を含んでいます。私はso3のCSS3のメディアクエリを配置しましたが、今私は右のギャップを取得しています。私はそれは私の背景の魔道師が全部通り抜けているからだと思っていたが、彼らは100％に設定したので、何が起こっているのか分からない。これはメディアが

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #banner, #main, #footer-widget-area { padding: 0 2em 0 2em; } 

}

を照会するためにこれは、tは

enter image description here

私のiPhone上でどのように見えるかである私が持っているものであるsomethignシンプルな、私は今それを見ていないよ...

です

アドバイスは有益であり、感謝しています。

出典

2012-11-05 kia4567

@ambrealsweb私はそれについて話しています......... –

viewportメタタグを参照してください。あなたのページの<head>にコードを追加した場合：

<meta name="viewport" content="width=1100">

1100pxワイドをレンダリングするためにiPhoneのビューポートを強制するだろうと。 iPhoneのデフォルトのビューポートは980ピクセルなので、あなたのページは、実際のコンテンツの幅ではなく、100％の幅が980ピクセルであることを示しています。

ビューポートは、トリッキーなことができ、ここではそれにいくつかのより多くの情報があります：

Viewport meta tag for non-responsive design

出典

2012-12-13 00:57:22 djfarrelly

このオプションは私のレイアウトに最適でした。ありがとう！ – kia4567

私はライブサイトをチェックし、問題がダウンして右側の余分なスペースのわずか3ピクセルにあるように見えます。私はまた、ナビゲーションメニューの改行に気付きました。それは最後の問題解決すれば、以下の通りにスマートフォンのメディアクエリを変更するようになっています

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

#header, #main, #footer-widget-area { padding: 0 1em 0 1em; } 
#banner { padding: 0; } 
#header-right { width: auto; } 
#access .menu-header { width: auto; } 

h4 { font-size: 1.4em; line-height: 1em; } 
}

出典

2012-12-13 02:07:17 tiffon

をどのようにこのことについて：

#wrapper { padding:0 2em; margin:0 auto; overflow:hidden; height:auto; } 
#header, #content, #stuff, #etc { margin:0;padding:0; } 
#inside stuff { whatever else; }

ラップあなたの最も外側のDIV（右後<body>と近い周り#wrapper</body>の前に）。

2emパディング領域の外にいくつかの要素を配置する予定がない限り、なぜこれがあなたの問題に対してより効率的な解決策にならないのか想像できません。

出典

2012-12-13 23:01:55 FurryWombat

モバイルデバイスのウェブサイトの埋め込みを設定する

答えて

関連する問題