Css iPhone上未显示标题
对不起，又是一个新手。需要帮助吗 我创建了一个网站（15年来的第一个网站），有几件事我很想知道，但第一件也是最重要的一件事是，为什么我的网站标题没有显示在iPhone上？ 我已经添加了viewport元标记，但它没有改变任何东西 我在这里读到的另一件事是添加@media，但它没有说明在哪里添加，所以我尝试了一些地方，但没有成功 有人能帮我吗 测试页代码Css iPhone上未显示标题,css,media,Css,Media,对不起，又是一个新手。需要帮助吗 我创建了一个网站（15年来的第一个网站），有几件事我很想知道，但第一件也是最重要的一件事是，为什么我的网站标题没有显示在iPhone上？ 我已经添加了viewport元标记，但它没有改变任何东西 我在这里读到的另一件事是添加@media，但它没有说明在哪里添加，所以我尝试了一些地方，但没有成功 有人能帮我吗 测试页代码 <meta http-equiv="content-type" content="text/html; c
<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>
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;
}
/*********************************************************************************/
/* 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%;
}
#header {
display: block;
}
#logo {
display: block;
}
#nav {
display: block;
}
显示：无隐藏元素，因此css隐藏了标题。视口标记对标题是否隐藏没有影响。我这里缺少上下文，但是你的css看起来是故意隐藏你的标题，所以我猜它是别人写的？如果是这样的话，这个人写这篇文章的目的可能是为一个屏幕尺寸应用这些css规则，为另一个屏幕尺寸应用一组不同的规则，但也许他们没有完成任务，或者我们在这里只看到css的一小部分。如果是这样，那么您应该考虑使用媒体查询为不同的屏幕大小应用不同的规则集。共享您的代码，或者如果您无法共享，则创建一个小页面复制您的页面，并在此处共享该代码。如果不查看您的实现，就很难提供帮助。我们需要查看html和css。感谢初始输入@Kavindra，我还需要添加什么吗？感谢初始输入@kloddant，我还需要添加什么吗？感谢@kloddant，我已经添加了一个带有“block”的图像。它看起来像一个迷你桌面屏幕大小变化很好，在1200像素上变化很好，在android上很好，但在iPhone上没有对不起，我应该说它看起来像一个迷你桌面，但却是一个破损的迷你桌面。你现在可以看到整个风格的移动css文件谢谢你@kloddant，现在它显示我可以使它垂直等等。
#header
{
display: none;
}
#logo
{
display: none;
}
#nav
{
display: none;
}
/*********************************************************************************/
/* 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%;
}
#header {
display: block;
}
#logo {
display: block;
}
#nav {
display: block;
}