2

私は私の写真の趣味のための新しいサイトに取り組んでいます。広告はfaspix.comです。ラップトップ/デスクトップに好きなように収まるようにしましたが、iPhoneにページをロードするときに幅をiPhoneに合わせるのに問題があります。高さは完全にありますが、幅のみです左から右に約半分を表示し、残りの幅を表示するには右にスクロールする必要があります...さまざまなメディアクエリを試しましたが、たとえば、site_content を最大幅 100 に切り替えたときなど、問題は実際には解決されませんでしたiPhone のコンテナを縮小しただけです。iPhoneでこの幅の問題を修正するのを手伝ってくれる人はいますか? ありがとう

CSS:

media (max-device-width: 1024px) { /*IPad portrait AND netbooks, AND anything with smaller screen*/ /*make the design flexible if possible */ /*Structure your code thinking about all devices that go below*/ } 

@media (max-device-width: 640px) { /*Iphone portrait and smaller*/ } 

media (max-device-width: 540px) { /*Smaller and smaller...*/ } 

media (max-device-width: 320px) { /*IPhone portrait and smaller. You can probably stop on 320px*/ }
4

3 に答える 3

1

ここにコピーした内容から判断すると、メディアクエリが正しくないようです。この質問で回答されているように、クエリの例をいくつか示します...

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

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

もちろん、必要に応じてスタイルを追加し、必要に応じてメディア クエリのサイズを変更してください。

今後の参考のために、CSS Tricksに Media Queries について読むのに適した記事があります。ここで述べたように、IE8以前はこれをサポートしていないため、考慮する必要があるもう1つのことはブラウザーの互換性です。

于 2013-11-05T17:14:00.940 に答える
1

コードがないので、暗がりでのショットです。追加

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

HTMLの先頭に。

于 2013-11-05T17:02:50.670 に答える