这里有HTML新手。开发了一个HTML和CSS的网站，现已发布。似乎在桌面和平板电脑（iPad）上渲染得很好，但在移动设备上则不然。已经遵循了各种建议，尤其是在视口周围，以解决这个问所以现在向那些知识渊博的人寻求帮助。
更新 在移动设备上显示时的问题是未列出导航菜单项。
查看该网站我列出了index.html页面的HTML以及下面的CSS。
提前感谢您的建议
的index.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if IE 6]><![endif]-->
<meta http-equiv="Content-Language" content="EN-GB"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="language" content="EN"/>
<title>Speech4All - Speech and Language Therapy</title>
<meta name="author" content="Speech4All"/>
<link rel="author" title="Speech4All"/>
<meta name="description" content="Speech and Language Therapy Services in Auckland"/>
<meta name="copyright" content="Copyright © 2016 Speech4All, All Rights Reserved"/>
<meta property="og:title" content="Speech4All - Speech and Language Therapy, Auckland"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="index.html"/>
<meta property="og:description" content="Speech and Language Therapy Services in Auckland"/>
<meta property="og:site_name" content="Speech4All"/>
<meta name="robots" content="index,follow,noodp,noydir"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge;chrome=1"/>
<link rel="canonical" href="index.html"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" media="screen,projection" type="text/css" id="google-fonts-css" href="http://fonts.googleapis.com/css?family=Amaranth:400,700"/>
<link rel="stylesheet" media="screen,projection" type="text/css" href="http://cdn-static.airsquare.com/5.6.4/compiled/theme/css.cfm?name=balloon&grid_max_width=960"/>
<link rel="stylesheet" media="screen,projection" type="text/css" id="managed-css" href="asset/csss4a.css"/>
<script type="text/javascript" src="../ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="container_12">
<div class="grid_12">
<div class="branding" itemscope="itemscope" itemtype="http://schema.org/Organization">
<a href="index.html" itemprop="url">
<img background-color="#add8e6" width="300" height="200" itemprop="logo" src="blah.png" alt="Speech4All" />
</a>
</div>
<div>
<a href="mailto:info@speech4all.co.nz?Subject=Website%20Enquiry" target="_top">info@speech4all.co.nz</a>
</div>
<div class="main-navigation">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="clear"></div>
<div class="container_12">
<div class="grid_4">
<h3>About me</h3>
<p>My name is Anony Mouse and I am the Speech and Language Therapist for Speech4All in the Central Auckland Area. </p>
<p>I specialise in working with children, adolescents and adults with speech and/or language delays and disorders.</p>
<p style="text-align: center;">       
<img alt="" height="386" src="./images/Blah.jpg" width="640" />
</p>
</div>
<div class="grid_4">
<h3>Qualifications</h3>
<ul>
<li>Master of Science with First Class Honours in Speech Language Sciences</li>
</ul>
<h3> </h3>
</div>
<div class="grid_4">
<h3>Why choose me?</h3>
<p>I pride myself on providing individualised client based Speech Language Therapy. I am passionate about what I do to support the communication needs of others and believe that everyone is capable of making progress. </p>
</div>
<div class="grid_4">
<h3>What I offer</h3>
<h4>Speech and Language Therapy Services</h4>
<ul>
<li>FREE consultation including a 15 minute screening to determine if Speech Language Therapy is required and would be beneficial.</li>
</ul>
</div>
</div>
</div>
</body>
CSS
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2, h3, h4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#header .branding h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
#header .main-navigation ul li a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { background-color: #FFFFFF; }
#wrapper { box-shadow: 0px 0px 30px #283036; }
#content { background:#FFFFFF; }
#header { background:#add8e6; }
#header .branding h1 a { color:#FFFFFF; }
#header .main-navigation ul li a { color: #5A1C2E; text-decoration: none;}
@media only screen and (max-device-width: 480px)
{
td#main_box
{
-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;
}
}
#header .main-navigation ul li a:hover { color:#8F1728; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content ul li a { color:#283036; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content { background:#FFFFFF; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content ul li a:hover { background:#8F1728; }
.ui-tooltip-main-navigation-sub-menu .ui-tooltip-content ul li a:hover { color:#FFFFFF; }
body { color:#555555; }
.cart table th { color:#555555; }
h1, h2, h3, h4 { color:#333333; }
.product h1 a { color:#333333; }
a { color:#8F1728; }
a:hover { color:#283036; }
.twitter-panel-listing { background:#F3F3F3; }
.testimonial-panel-listing { background:#F3F3F3; }
.testimonial-listing { background:#F3F3F3; }
.button { background:#add8e6; }
.button { color:#000000; }
.button:hover { color:#000000; }
th { background: #8F1728; }
th { color: #FFFFFF; }
#footer { background:#E7E7E7; }
答案 0 :(得分：0)
除了导航没有显示外，该网站在移动设备上看起来还不错。如果这是问题，那是因为这个CSS
@media only screen and (max-width: 767px) and (min-width: 0px)
.main-navigation li:not(.toggle) {
display: none;
}
我的代码中没有.toggle，因此我认为您只想删除该CSS，导航将会显示。