固定位置在移动浏览器中不起作用

Posted

技术标签:

【中文标题】固定位置在移动浏览器中不起作用【英文标题】：Position fixed not working in mobile browser 【发布时间】：2013-10-15 18:09:12 【问题描述】：

如何在移动浏览器（ios和android）中固定元素位置？ 在 ios 中，元素仍然使用以下代码滚动 

<html>
 <head>
<style>
     .fixed
      position:fixed;
      top:0;
      left:0;
    
</style>
</head>
<body>
     <div class="fixed">
     Hi I m Position Fixed 
     </div>
    <div>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>
       sample text<br/>

    </div>
</body>
</html>

【问题讨论】：

回答您自己的问题是可以的，但请正确回答。用对问题的描述而不是介绍（而不是相反）使这个问题成为一个明确的问题。 嗯...你仍然可以编辑。 嗨@Vicky。我怀疑你的问题因为你措辞“健谈”的方式而引起了反对票——最初，它读起来像一篇博客文章，而不是一个问题。绝对鼓励发布然后回答您自己的问题 (meta.stackexchange.com/questions/17463/…) - 请注意将您的问题设置为问题，然后发布答案，而不是在问题字段中写博客式的帖子。希望这有帮助！ 【参考方案1】：

position: fixed 在大多数旧版本的iOS 和Blackberry 中不起作用。我已经在大多数移动浏览器中尝试过此修复程序，并且在没有任何 javascript 插件的情况下运行顺利。

使用-webkit-backface-visibility: hidden;

.fixed 
  position: fixed;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden;
  /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/

<div class="fixed">
  Hi I m Position Fixed
</div>
<div>
  sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>sample text
  <br/>

</div>

【讨论】：

背面可见性与固定位置有什么关系？ @justnS，参考this...【参考方案2】：

你也可以使用 position:absolute 来固定标题试试 IT..

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Web App Template</title>
    <style type="text/css" media="all">
        body,ul,li padding:0;margin:0;border:0;
        body font-family:helvetica;
        headerbackground-color:#deb500;position:absolute;z-index:2;top:0; left:0;width:100%;height:45px;padding:0;
        footer background-color:#c27b00;position:absolute;z-index:2;bottom:0; left:0;width:100%;height:48px;padding:0;border-top:1px solid #444;
        header, footerfont-size:20px;text-align:center;color:#f3f3f3;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5);line-height:45px;
        #wrapper position:absolute;z-index:1;top:45px; bottom:48px; left:0;width:100%;background:#aaa;overflow:auto;
        #scroll-content position:absolute;z-index:1;width:100%;padding:0;
        ul list-style:none;padding:0;margin:0;width:100%;text-align:left;
        li padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px;
    </style>
</head>
<body>
    <header>Web App Template</header>
    <div id="wrapper">
        <div id="scroll-content">
            <ul>
                <li>Some Stuff</li>
                <li>More Stuff</li>
                <li>Big Stuff</li>
                <li>Small Stuff</li>
                <li>Geek Stuff</li>
                <li>Nerd Stuff</li>
                <li>Fast Stuff</li>
                <li>Slow Stuff</li>
                <li>Good Stuff</li>
                <li>Bad Stuff</li>
                <li>Your Stuff</li>
                <li>My Stuff</li>
                <li>Their Stuff</li>
                <li>Our Stuff</li>
                <li>Super Stuff</li>
                <li>Uber Stuff</li>
                <li>Stuff Stuff</li>
                <li>French Stuff</li>
                <li>German Stuff</li>
                <li>English Stuff</li>
                <li>American Stuff</li>
                <li>Stuff</li>
            </ul>
        </div>   
    </div>
    <footer>Some Footer Content</footer>

【讨论】：

绝对定位与固定位置不同，只有在滚动之前“出现”，然后标题才会消失。因此，此回复并未解决运营商的顾虑和要求。【参考方案3】：

如果它仅在移动浏览器中，并且您不需要向后兼容 iOS 和黑莓，您可能需要使用媒体查询。

@media only screen and (max-device-width : 730px) 
    .fixed 
        position:fixed;
        top:0;
        left:0;

【讨论】：

以上是关于固定位置在移动浏览器中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

移动友好的工具提示在 Android 浏览器中不起作用

CSS背景色过渡在特定浏览器中不起作用（桌面+移动）

javascript代码在chrome移动浏览器中不起作用，但在桌面上它工作正常

CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用

Float left 在 ipod、android 智能手机等移动设备中不起作用

固定定位在 Safari 7 中不起作用