个人中心
gpt4 book ai didi

HTML 网页在台式机和平板电脑上显示良好，但在手机上显示不佳

转载 作者：行者123 更新时间：2023-11-28 04:47:03 26 4
gpt4 key购买 nike

这里是 HTML 新手。用 HTML 和 CSS 开发了一个网站，该网站现已发布。似乎在台式机和平板电脑 (iPad) 上呈现良好，但在移动设备上则不然。遵循了各种建议，特别是围绕视口(viewport)来解决这个问题，但没有成功。所以现在向那些更有知识的人寻求帮助。

更新在移动设备上显示时的问题是未列出导航菜单项。

可以在 http://speech4all.co.nz 查看该站点

我列出了 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&amp;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;">&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                    <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>&#160;</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&#160;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; }

最佳答案

该网站在我看来在移动设备上没问题，只是您的导航未显示。如果这是问题所在，那是因为这个 CSS

@media only screen and (max-width: 767px) and (min-width: 0px)
.main-navigation li:not(.toggle) {
    display: none;
}

我在您的代码中没有看到 .toggle，所以我认为您只是想删除该 CSS，这样您的导航就会可见。

关于HTML 网页在台式机和平板电脑上显示良好，但在手机上显示不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40897690/

26 4 0
文章推荐： javascript - JQuery 无法识别#FFFFFF 的背景颜色
文章推荐： javascript - 如何动态添加问题到Vue Webpack模板的meta.js文件中？
文章推荐： c++ - 编辑 QTableWidgetItem 时捕获 ESC 键
文章推荐： html - 在 AEM 6.2 的 Sightly 中，运行时变量未在样式元素内解析
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com