0

レスポンシブデザインのサイトの構築に取り組んでいます。

私は次のような特定のCSSスタイルを持っています：

/* when viewport height less than 320px */
@media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */

    #footer {
        font-size: 65%;
        line-height: 110%;
        margin-top: 12px;
    }

}

iPhoneで横向きモードでテストしましたが、フォントサイズは65％に変更されず、これら3つのスタイルのいずれも有効になりません。これは、iPhoneの画面の高さの寸法を検出するための有効で適切な方法ですか？

4

2 に答える 2

2

別のメディアクエリを使用してみてください。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
}

メディアクエリで問題が発生したことはありません。ポートレートモードとランドスケープモードの両方でオンラインiPhoneエミュレーターを使用してWebサイトをテストした後、フォントサイズは65％に設定されます。

http://www.testiphone.com/

ただし、上記のメディアクエリが機能しない場合は、ビューポートを変更してみてください。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
于 2012-12-29T18:45:28.857 に答える
0

jQuery

$(document).ready(function(){
   if($(document).width() <= 320){
      $("#footer").addClass("newclass")
   }
})

CSS

.newclass {
    font-size: 65%;
    line-height: 110%;
    margin-top: 12px;
}
于 2012-12-29T18:38:32.423 に答える