Header 未在 iPhone 上显示

Question

enter image description here对不起，又是一个新人。需要帮助吗？？

我创建了一个网站（15 年来的第一个网站），有几件事我想知道，但第一个也是最重要的是，为什么我的网站 header 不显示在 iPhone 上？ Android showing header iPhone without header

我添加了视口元标记，但它没有任何改变。

我在这里读到的另一件事是添加@media，但它没有说明添加到哪里，所以我尝试了几个地方但没有成功。

有人可以帮我吗？

测试页面代码

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700" rel="stylesheet" type="text/css">
        <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-panels.min.js"></script>
        <script src="js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="css/skel-noscript.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-desktop.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
    </head>
    <body class="left-sidebar">

    <!-- Header -->
        <div id="header">
            <div class="container">
                    
                <!-- Logo -->
                    <div id="logo">
                        <h2><a href="#">Dress Up Leeds Ltd</a></h2>
                    </div>
                
                <!-- Nav -->
                    <nav id="nav">
                        <ul>
                             <li><a href="index.html" class="button" title="Home Button" target="_self">home</a></li>
                            <li><a href="store.html" class="button" title="Dress Up Store Button" target="_self">store</a></li>
                            <li class="active"><a href="contact.html" class="button" title="Contact Us Button" target="_self">contact us</a></li>
                            <li><a href="about.html" class="button" title="About Dress Up Button" target="_self">about</a></li>
                        </ul>
                    </nav>

            </div>
        </div>

style.css 对于 header

header
    {
        margin-bottom: 2em;
        line-height: 1.7em;
    }
    
        header h2
        {
            font-size: 2.5em;
        }

        header .byline
        {
            display: block;
            margin: 0.5em 0 0 0;
            padding: 0 0 0.5em 0;
            text-transform: uppercase;
            font-size: 1.4em;
        }

        p {
            font-size: 1.1em;
        }

和

#header
    {
        position: relative;
        background: #FFF;
    }

        #header .container
        {
            position: relative;
            padding: 4em 0em;
        }

style-mobile.css 对于 header

header { }

    header h2
    {
        font-size: 1.6em;
    }

    header .byline
    {
        font-size: 1em;
    }

和

#header
    {
        display: none;
    }

    #logo
    {
        display: none;
    }
    
    #nav
    {
        display: none;
    }

style-mobile css 整个文件

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

    body,input,textarea,select
    {
        line-height: 1.75em;
        font-size: 11pt;
        letter-spacing: 0;
    }

    body
    {
        padding-top: 44px;
    }

    h2, h3, h4, h5, h6
    {
        font-size: 1.5em;
    }

    section,
    article
    {
        clear: both;
        margin: 2em 0 2em 0 !important;
    }

    section > :first-child,
    article > :first-child
    {
        margin-top: 0 !important;
    }

    section:first-child,
    article:first-child
    {
        margin-top: 0 !important;
    }

    .container
    {
        padding: 0em 1em;
    }
    
    .button
    {
        display: block;
        width: 100%;
        text-align: center;
    }

    header
    {
    }
    
        header h2
        {
            font-size: 1.6em;
        }

        header .byline
        {
            font-size: 1em;
        }
    
/*********************************************************************************/
/* UI                                                                            */
/*********************************************************************************/

    #titleBar
    {
        background: #202020 url(images/img01.jpg) repeat;
    }

        #titleBar .title
        {
            display: block;
            color: #fff;
            text-align: center;
            line-height: 44px;
        }

        #titleBar .toggle
        {
            position: absolute;
            left: 0;
            top: 0;
            width: 80px;
            height: 60px;
        }

            #titleBar .toggle:after
            {
                content: '';
                display: block;
                width: 20px;
                height: 12px;
                position: absolute;
                left: 10px;
                top: 15px;
                background: url('images/toggle.svg') 0px 0px no-repeat;
                opacity: 0.5;
            }

            #titleBar .toggle:active:after
            {
                opacity: 0.75;
            }

    #navPanel
    {
        background: #202020 url(images/img01.jpg) repeat;
        box-shadow: inset -10px 0px 20px 0px rgba(0,0,0,0.5);
    }

        #navPanel .link
        {
            display: block;
            color: #888;
            text-decoration: none;
            height: 44px;
            line-height: 44px;
            border-top: solid 1px rgba(255,255,255,0.1);
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 0 1em 0 1em;
        }
        
            #navPanel .link:first-child
            {
                border-top: 0;
            }
            
            #navPanel .link.depth-0
            {
                color: #fff;
            }

            #navPanel .indent-1 { display: inline-block; width: 1em; }
            #navPanel .indent-2 { display: inline-block; width: 2em; }
            #navPanel .indent-3 { display: inline-block; width: 3em; }
            #navPanel .indent-4 { display: inline-block; width: 4em; }
            #navPanel .indent-5 { display: inline-block; width: 5em; }
            #navPanel .depth-0 { color: #fff; }
            
/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

    #header
    {
        display: block;
    }

    #logo
    {
        display: block;
    }
    
    #nav
    {
        display: block;
    }

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

    #banner
    {
        padding: 6em 0em;
    }


/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

    #page
    {
        padding: 2em 0em 2em 0em;
    }

    #main
    {
        margin-top: 3em;
        padding-top: 0em;
        border-top: none;
    }

    
    .homepage #main
    {
        margin-top: 3em;
        padding-top: 3em;
    }
    
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
    
    #footer
    {
        padding: 0em 0em 2em 0em;
    }
    
/*********************************************************************************/
/* Featured                                                                      */
/*********************************************************************************/
    
    #featured
    {
        position: relative;
        padding: 4em 0em 2em 0em;
    }
    
    #featured .divider
    {
        padding: 2em 0em 0em 0em;
    }
    
    #featured .left
    {
        float: none;
        width: 100%;
    }

Answer 1

试试这个：

#header {
    display: block;
}

#logo {
    display: block;
}

#nav {
    display: block;
}

显示：none 隐藏元素，因此您的 css 隐藏了您的 header。 viewport 标签对 header 是否隐藏没有影响。我在这里缺少上下文，但你的 css 看起来像是故意隐藏你的 header，所以我猜它是别人写的？如果是这样，那么该人编写它的目的可能是为一种屏幕尺寸应用这些 css 规则，并为另一种屏幕尺寸应用一组不同的规则，但也许他们没有完成任务，或者我们只是看到css这里的一小部分。如果是这种情况，那么您应该考虑使用媒体查询为不同的屏幕尺寸应用不同的规则集。

Header 未在 iPhone 上显示

Header not showing on iPhones

css

media