如何調整iphone和ipad的導航工具欄寬度？

Question

我正在開發iphone和ipad的網頁。我創建了一個導航工具欄，在ipad上看起來不錯，但在iphone上只有兩個超鏈接出現！任何人都可以告訴我如何縮小導航工具欄，以便所有超鏈接顯示在iphone 6屏幕上？（我希望所有導航欄超鏈接都顯示在iphone和ipad上）。提前致謝？

ul#navigation { 
 
    height: 70px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
    text-align: center; 
 
    font-size: 22px; 
 
    font-family: 'Cham-WebFont', Arial, sans-serif; 
 
    background-color: #FFF; 
 
    position: fixed; 
 
    /* new */ 
 
    bottom: 0; 
 
    /* new */ 
 
    width: 100%; 
 
    /* new */ 
 
    } 
 
    ul#navigation li { 
 
    display: inline; 
 
    margin-right: .75em; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    ul#navigation li.last { 
 
    margin-right: 0; 
 
    } 
 
    #MenuContainer { 
 
    text-align: center; 
 
    margin: 50px auto; 
 
    } 
 
    #MenuContainer a { 
 
    margin: 0px 20px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    color: black; 
 
    }

<meta name="apple-mobile-web-app-capable" content="yes"> 
 
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> 
 
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css"> 
 
<link href="./TEST.css" rel="stylesheet" type="text/css"> 
 
<div id="MenuContainer"> 
 
    <ul id="navigation"> 
 

 
    <li class="x"> 
 
     <a title="1" href="./test.php?a"> 
 
     <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">First</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="2" href="./test.php" onclick="location.href=this.href+'?b&id='+currentID;return false;"> 
 
     <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Second</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="3" href="./test.php?c"> 
 
     <img id="Button3" src="./2.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Third</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="4" href="./test.php?d"> 
 
     <img id="Button4" src="./3.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Fourth</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="5" href="./test.php?e"> 
 
     <img id="Button5" src="./4.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Fifth</div> 
 
     </a> 
 
    </li> 
 
</ul> 
 
</div>

Answer 1

您可以取代height:70px;到max-height: 100%; min-height:70px;

見段：

ul#navigation { 
 
    max-height: 100%; 
 
    min-height:70px; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid #ccc; 
 
    border-width: 1px 0; 
 
    text-align: center; 
 
    font-size: 22px; 
 
    font-family: 'Cham-WebFont', Arial, sans-serif; 
 
    background-color: #FFF; 
 
    position: fixed; 
 
    /* new */ 
 
    bottom: 0; 
 
    /* new */ 
 
    width: 100%; 
 
    /* new */ 
 
    } 
 
    ul#navigation li { 
 
    display: inline; 
 
    margin-right: .75em; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    ul#navigation li.last { 
 
    margin-right: 0; 
 
    } 
 
    #MenuContainer { 
 
    text-align: center; 
 
    margin: 50px auto; 
 
    } 
 
    #MenuContainer a { 
 
    margin: 0px 20px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    color: black; 
 
    }

<div id="MenuContainer"> 
 
    <ul id="navigation"> 
 
    <li class="x"> 
 
     <a title="1" href="./test.php?a"> 
 
     <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">First</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="2" href="./test.php" onclick="location.href=this.href+'?b&id='+currentID;return false;"> 
 
     <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Second</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="3" href="./test.php?c"> 
 
     <img id="Button3" src="./2.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Third</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="4" href="./test.php?d"> 
 
     <img id="Button4" src="./3.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Fourth</div> 
 
     </a> 
 
    </li> 
 
    <li class="x"> 
 
     <a title="5" href="./test.php?e"> 
 
     <img id="Button5" src="./4.png" alt="" width="42" height="42" border="0"> 
 
     <div class="caption">Fifth</div> 
 
     </a> 
 
    </li> 
 
</ul>