在移动设备上，当用户双击时，固定 div 会阻止内容答案

【问题标题】：On mobile, fixed div blocks content when user double taps在移动设备上，当用户双击时，固定 div 会阻止内容
【发布时间】：2014-01-24 15:02:03
【问题描述】：

我遇到的问题是，当移动用户双击以放大右侧容器中的内容时，我设置为固定的左侧容器会跳到缩放内容的前面。我不知道如何纠正这个问题。

CSS

#left_container{
    position: fixed;
    float: left;
}

#right_container{
    float: left;
    color: white;
    width: 75%;
    max-width: 600px;
    font-size: 1.5em;
    margin-left: 210px;
}

HTML

<div id="left_container">
    <div id="header"> 
        <center><h2>Hello World</h2></center>
    </div>

    <div id="globe"> 
        <img src="http://us.123rf.com/400wm/400/400/Kmitu/Kmitu0706/Kmitu070600073/1126687-globe-isolated-on-pure-white-background.jpg" width="200" height="200">
    </div>

    <div id="navigation_buttons">
        <ul> 
            <li><a href="#">HOME</a></li>
        <li><a href="#">PROJECTS*</a></li>
        <li><a href="#">BLOG*</a></li>
        <li><a href="#">CONTACT</a></li>            
        </ul>
    </div>   
</div>

<div id="right_container">
    <h1>Content</h1>   
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>

【问题讨论】：

这只是position:fixed的正常行为

标签： html css mobile responsive-design

【解决方案1】：

关于将元素定位到fixed..，您需要了解一些事情。

首先，任何设置为fixed 或absolute 的元素都需要[top 和left] 或[bottom 和right] 的值。注意：float:left; 不会影响 fixed 元素，您的意思是使用 left:0;

其次，fixed 或 absolute 定位元素将覆盖任何 static（默认位置）定位元素。

所以发生的情况是，当用户放大时，窗口范围变小，导致您的 fixed 元素跨越屏幕的更多区域。

您需要做的是，要么使用 Javascript/jQuery 使您的设计具有响应性，这样您就可以预见用户“放大”的位置。

你可以做到这一点的另一种方法是给你的fixed元素一个right为0并将它嵌套在另一个元素中，位置为relative...这将绑定你的fixed元素和限制它的界限。

您可能需要阅读position 属性http://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：