Question

http://jimjamdesigns.co.uk/online-portfolio/animals.html

（仅限Iphone ）由于某种原因，上面我网站的固定元素会延伸到最后一个溢出元素的末尾，而不是忽略溢出并处理设备本身的宽度。

奇怪的是，在IPAD上它运作正常。

我已尝试过这些视口元标记：

<meta name="viewport" content="width=568px, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,">

以及其他一些人。

我还在线搜索解决方案并尝试了所有人但没有成功。大多数建议说使用不同的位置来锁定整个站点并禁用导航到溢出元素 - 这是不可取的。

以下是有问题的元素：

<div id='back-nav'>


<a id='bk-to-start' href='j-a-allan-childrensbooks.html'>Back to the Start</a>
<a id='bk-to-sib' href='siblings.html'>Back to Animals</a>

</div>

<div id='main-nav-wrap'>
<ul id="ani-menu">

    <li><a id='ani' class='scroll-hori' href="#animals">Animals Vol. 1</a></li>
    <li><a id='ele' class='scroll-hori' href="#elle-wrap">Ellie the Acrobat Elephant</a></li>
    <li><a id='rat' class='scroll-hori' href="#rat-wrap">The Runaway Rat</a></li>
    <li><a id='vic' class='scroll-hori' href="#vic-wrap">Victor the Vegetarian Vulture</a></li>


</ul>
</div>

<div id="title"></div>
<h2 id='title2'>Written & Illustrated by James Allan</h2>

带有媒体查询的CSS

media screen and (max-width: 736px) and (min-width: 568px)
#back-nav {
margin: 1% 0 0 3%;
z-index: 1002;
}
#back-nav {
width: 100%;
position: fixed;
z-index: 1002;
margin: 0.7% 0 0 5%;

#main-nav-wrap {
position: fixed;
width: 100%;
z-index: 999;

@media screen and (max-width: 736px) and (min-width: 568px)
#ani-menu {
width: 78%;
margin: 3.5% 0 0 5%;
}
#ani-menu {
width: 9%;
padding: 0;
margin: 4% 0 0 6%;
z-index: 1001;
}

@media screen and (max-width: 736px) and (min-width: 568px)
#title {
margin: 1% 0 0 27%;
width: 47%;
height: 25%;
}
#title {
background-image: url(../optimised/animals-title.jpg)!important;
background-size: 100% !important;
background-repeat: no-repeat !important;
z-index: 998;
margin: 1% 0 0 29%;
width: 42%;
height: 25%;
position: fixed;
}

@media screen and (max-width: 736px) and (min-width: 568px)
#title2 {
font-size: 11px;
margin: 5.5% 0% 0% 0%;
}
#title2 {
width: 100%;
text-align: center;
font-size: 1.3vw;
font-weight: 500;
margin: 4.5% 0% 0% 0%;
color: #000;
position: fixed;
z-index: 999;
}

如果有人可以在Iphone上看到这个（我只在Iphone 5上测试过）看看发生了什么，任何帮助阻止我打破一些基本的设计道德以令人沮丧地作为一种解决方案的任何帮助将是不可思议的...

IPhone上水平溢出的固定位置

0 个答案: