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 的宽度为 480 像素，但我如何定位设备及其宽度，理想情况下不为其创建另一个 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 回答