php - 如何调整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%;最小高度: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>