网站在移动设备上看起来非常糟糕

-2

大约一个月前我学习了一些HTML/CSS后，我一直在构建我的第一个网站。它在我尝试过的所有桌面浏览器（safari，firefox，chrome，IE）上看起来不错，但是当我在ios safari/chrome上测试它时，它看起来非常糟糕...网站在移动设备上看起来非常糟糕

经过大量搜索之后，似乎无法找到答案，对此的任何帮助将不胜感激！

我有一个包装股利和CSS中设置为100％宽一些其他的div

CSS

html,body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    overflow-x: hidden; 
} 

.wrapper { 
     position:absolute; 
     top:0px; 
     width:100%; 
     margin:auto; 
     height:9000px;; 
     z-index:0; 
} 

#home { 
     position:absolute; 
     top:0px; 
     width:100%; 
     margin:auto; 
     height:1000px; 
     background-color:#00ADEE; 
     z-index:0; 
}

HTML

<body>  
    <div class="wrapper"> 
     <div id="home"> 
     <div id="homecontainer"> 
     <div id="homelogo"></div> 
       <a href="#thumbnailgallery" class="smoothScroll"><div id="projectbutton"></div></a> 
       <a href="#about" class="smoothScroll"><div id="aboutbutton"></div></a> 
       <a href="#contact" class="smoothScroll"><div id="contactbutton"></div></a> 
     </div> 
    </div> <!--Home closing tag-->

是否有某种形式的HTML代码，我是缺少检测移动显示器？

来源

2014-06-15 user3741443

这是您的完整HTML吗？你错过了一些元素，比如HTML标签和一些关闭的div。让我知道如果这是你的完整代码或不。另外，如果它是100％，则不需要提供包装边距：自动。你需要给它90％的宽度，然后给它一个margin：auto。这将集中它，并使其在移动设备上看起来不错。您需要确保当您提出问题时，您已向我们提供了尽可能多的详细信息，以及您正在使用的完整代码。您的问题将会以投票方式进行，就像您看到的情况一样。 –

您需要使用CSS媒体查询 – BenEgan1991

CSS媒体查询，您也可以使用.htaccess – reidjako

您可以使用视元的定义在移动设备上的初始规模

所以在头标记添加视口元，如下面的例子

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body>  
     <div class="wrapper"> 
     <div id="home"> 
     <div id="homecontainer"> 
     <div id="homelogo"></div> 
       <a href="#thumbnailgallery" class="smoothScroll"><div id="projectbutton"></div></a> 
       <a href="#about" class="smoothScroll"><div id="aboutbutton"></div></a> 
       <a href="#contact" class="smoothScroll"><div id="contactbutton"></div></a> 
     </div> 
    </div>

来源

2014-06-15 01:51:22 pushpraj

网站在移动设备上看起来非常糟糕

回答

相关问题