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

您可以将<html> <head> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $(function () { $(document).on('click', '.youtube_video', function(){ var video_id = "abc"; window.history.pushState("vidPage", "vidPopped", "/video/" + video_id + ""); showVid(); }); $(document).on('click', '.popblock_box_exit', function(){ window.history.back(); hideVid(); }); window.onpopstate = function(e){ console.log("state", e.state); if (e.state == 'vidPage') { var popID = 'vid1'; showVid(); // GOOD // $("#"+ popID).trigger( "click" ); // BAD } else { hideVid(); } }; }); function showVid() { $('#popup').show(); } function hideVid() { $('#popup').hide(); } </script> </head> <body> <div class="youtube_video" id="vid1">Youtube video</div> <div id="popup" style="background: #CCC; display: none;"> <div class="popblock_box_exit">Exit</div> </div> </body> </html>替换为<? echo $this->QrCode->text('Hello World'); ?>

请参阅代码段

height:70px;

max-height: 100%; min-height:70px;

如何调整iphone和ipad的导航工具栏宽度？

1 个答案: