網站在移動設備上看起來非常糟糕

-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

網站在移動設備上看起來非常糟糕

回答

相關問題