1

私は自分のウェブサイトのモバイル版を開発しています。Galaxy S3でテストされたこのコードがあります。スクロールはなく、サイトは正常に表示されます。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" media="only screen and (max-width: 400px)" href="css/mobile.css" />
    <link rel="stylesheet" media="only screen and (min-width: 401px)" href="css/desktop.css" /> 
</head>

ただし、iPhone 4 では、これが表示されます。画像が少し大きすぎて、上部のバーが携帯電話の幅いっぱいまで伸びていません。これは、iPhone の幅が 480px であるためだと思いますが、理想的には別の CSS ファイルを作成せずに、デバイスとその幅をターゲットにするにはどうすればよいですか?

ここでは、トップ バーが border-top として設定されています。

body { background-color:#F5F5F5; width: 100%; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; line-height: 14px; }

ここに画像の説明を入力

4

1 に答える 1

2

これは、プライマリ スタイルシートに入れることができます。

/*Target iPhone's screen width*/
@media screen and (max-device-width: 480px){
/*Do not set fixed widths, use %*/
    body{
        -webkit-text-size-adjust:none;
        font-family:Helvetica, Arial, Verdana, sans-serif;
        padding:5px;
    }
/*Set widths to 100%*/
    div{
        clear:both!important;
        display:block!important;
        width:100%!important;
        float:none!important;
        margin:0!important;
        padding:0!important;
    }
/*Create vertical navigation menu*/
    #nav,#nav li{
        float:none!important;
        clear:both!important;
        margin:0 0 20px 0!important;
        display:block;
        padding:0;
        text-align:left!important;
        width:100%;
    }
    #nav{
        border:1px solid #ccc;
        padding:5px;
        border-radius:5px;
    }
    #nav li{
        margin:0!important;
    }
    #nav li a{
        display:block;
    }
}
于 2013-07-25T15:25:41.637 に答える