Как настроить ширину панели инструментов навигации для iphone и ipad?
Я занимаюсь разработкой веб-страницы для 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>Решение
Вы могли бы заменить 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>Другие решения
Других решений пока нет …