收縮高度的網站是移動友好

我有一個網站，我正在努力。在我太過分之前（是的，大多數鏈接都不起作用，因爲我還沒有製作），我正在努力確保它適用於iPhone和其他移動設備。高度（CSS）在計算機上運行良好，但延伸遠低於我在移動設備上加載時的意圖。收縮高度的網站是移動友好

這裏是我的index.html頁面的腳本：

html body { 
     width: 100%; 
     height: 100%; 
     margin: 0%; 
     padding: 0px; 
     overflow: hidden; 
     display: flex; 
     background-image: url(http://www.jpegchaos.com/chipimage.jpg); 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 
    #fullbody { 
     margin: 0px; 
     float: left; 
     position: absolute; 
     padding: 0px; 
     width: 100%; 
     height: 100%; 
     display: flex; 
    } 
    #left { 
     width: 15%; 
     height: 100%; 
     padding: 0px; 
     margin: 0px; 
     display: inline-block; 
     opacity: 0; 
    } 
    #center { 
     width: 70%; 
     height: 100%; 
     padding: 0px; 
     margin: 0px; 
     background-color: lightgrey; 
     display: inline-block; 
    } 
    #centertextarea { 
     width: 90%; 
     height: 100%; 
     padding: 0px; 
     margin-right: 5%; 
     margin-left: 5%; 
     margin-top: 0px; 
     text-wrap: normal; 
     word-wrap: break-word; 
    } 
    #right { 
     width: 15%; 
     height: 100%; 
     padding: 0px; 
     margin: 0px; 
     display: inline-block; 
    } 
    .header { 
     font-size: 40px; 
     color: black; 
     text-align: center; 
    } 
    .footer{ 
     background-color: lightgrey; 
     font-size: 13px; 
     color: black; 
     text-align: center; 
     bottom: -60px; 
     height: 100px; 
     left: 0; 
     position: absolute; 
     width: 60%; 
     margin-left: 20%; 
    }

然後將HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name=viewport content='width=700'> 
     <title>JPeG & Chaos LLP - Your Technology Repair HQ</title> 
     <link rel="stylesheet" href="styles/structure.css"> 
     <link rel="stylesheet" href="styles/advanced.css"> 
     <link rel="stylesheet" href="styles/tags.css"> 
     <link rel="icon" type="image/png" href="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/c27.0.160.160/p160x160/541649_1552490621690166_7622307717201533155_n.jpg?oh=0be92daed3243de2719efe5185583bc1&oe=55D3880B&__gda__=1437242841_f81d654a074a10e951f604fd343220c9"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script> 
      $(function() { 
       $("#top").load("structure/header.html"); 
       $("#bottom").load("structure/footer.html"); 
       $("#menubar").load("structure/menubar.html"); 
       $("#newssidebar").load("news.html"); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="fullbody"> 
      <div id="left"></div> 
      <div id="center"> 
       <div id="top"></div> 
       <div id="menubar"></div> 
       <div id="centertextarea"> 
        <table class="noborder"> 
         <tr class="noborder"> 
          <td class="splitleft"> 
           <!-- Removed for Clerity --> 
          </td> 
          <td class="hollowmiddle"></td> 
          <td class="splitright"> 
           <!-- Removed for Clerity --> 
          </td> 
         </tr> 
        </table> 

       </div> 
       <div id="bottom"></div> 
      </div> 

      <div id="right"> 
       <div id="newssidebar"></div> 
      </div> 
     </div> 
    </body> 
</html>

的框架，一切都加載完美，但該中心一個似乎可走太遠。

我拿出了「footer」div，它仍然太高，所以排除了可能性列表中的那個。

來源

2015-05-31 jpgerb

在Chrome中，開發人員工具（「元素」標籤旁邊的智能手機/平板電腦圖標）中有一個「設備模式」，您可以使用該模式來模擬設備。 FireFox具有類似的功能。也許這有助於在那裏測試你的頁面，因爲你可以實際檢查元素並檢查應用了哪些CSS規則。 – GolezTrol

@GolezTrol謝謝你。我會盡量使用它。 – jpgerb

如果他們在手機上以橫向視圖查看網站會怎麼樣？這真的很小。你爲什麼需要用這種方式來限制高度？ – sharf

Throught很多變化，我收到的意見我做了以下解決這個問題：

*從#right DIV去除高度功能
*改變#left div來height: 1px;
*改變#center的div height: 100vh
*加入overflow-y: auto;到#center DIV
*改變#footer到：

.footer{ 
    background-color: lightgrey; 
    font-size: 13px; 
    color: black; 
    text-align: center; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 70%; 
    margin-left: 15%; 
    white-space: nowrap; 
}

來源

2015-05-31 22:31:29 jpgerb

收縮高度的網站是移動友好

回答

相關問題