0

私は iPhone 4 を持っています。解像度が私のスタイルのパラメータ内にあることはわかっています。それでも、スマートフォンで全幅のレイアウトが表示されます。

新鮮な目でソースを見てもらい、明らかな何かが欠けている場合は知らせてもらえますか? ブラウザには表示されますが、デバイスには表示されません。

http://georgiaderm.com/mobile/

私のHTMLで：

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

私のCSSで：

/* ---------------------------------------------------------------------- */
/*  Media Queries
/* ---------------------------------------------------------------------- */

//* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:1000px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:1000px) {
    body {padding:10px 4px; width:760px;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:768px) {
    html {background:#fff; padding:10px;}
    body {box-shadow:none; margin:0; padding:0; width:auto;}
    body > nav {display:none;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:768px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:480px) {
    .alpha, .omega {float:none;}
    .alpha > * {margin:10px auto;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:320px) {
    footer div {float:none; width:auto;}
}

編集：簡略化しました。

私がここにいる間、小型デバイスで JS タブを非アクティブ化するための軽量な戦略を持っている人はいますか?

4

2 に答える 2

0

メディア クエリで具体的に 0px を定義します。次に例を示します。

@media only screen and (min-width:0px) and (max-width:1000px)
{
    /* STYLES GO HERE */
}

おそらくそれが役立つでしょうか？

于 2013-03-14T18:15:17.073 に答える