相关疑难解决方法(0)

在HTML网站上,您有一个固定的元素,如下所示:

<div id="fixed">
  <p>Some content</p>
</div>

它有这个CSS:

#fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; }

当您在移动设备(或任何支持触摸屏的设备)上查看此页面,并且您捏合屏幕以放大时,固定元素将与所有其他内容一起放大(它会变大).放大到足够远时,它变得如此之大,以至于它几乎完全覆盖了它下面的所有内容.

一个实际的用例是UI,如顶部的固定导航栏,或屏幕一角的浮动按钮.

如何防止单个元素在浏览器中调整大小,并使其始终保持相同的大小？

当使用bootstrap 3的固定顶部导航时,我注意到当用户在移动设备上使用原生缩放时,顶部导航也变得非常大.这导致了非常差的用户体验,导航模糊了大部分内容并最终破坏了自身,如下例所示:

这个问题可以在http://www.exploretrade.info/上看到,并且似乎也会影响使用这种导航的许多其他网站; 一个常见的解决方案是禁用用户缩放,但这会损害网站的可访问性.

我的问题是:当用户缩放移动设备上的内容时,如何使固定顶部导航的显示大小保持不变

• 使用JavaScript,可以计算当前应用的设备缩放,并动态更新css transform: scale指令2
• 但是,这似乎不适用于position: fixed元素,在缩小之后最终以某种方式居中在屏幕中

我有一个带有背景图像的 div。当用户从浏览器放大页面时（使用 Ctrl & + 或 Ctrl + 滚动），我不想放大图像。缩放后图像应保持不变。有没有办法做到这一点？

这是包含背景图像的 div 的样式：

.owl-slide{
    background-image: url('...');
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我知道正常行为是放大页面内的所有内容，甚至是图像。但这是客户的要求，需要解决，即使我不同意。

我想在页面顶部创建一条无法缩放的行.既不是行,也不是包含在其中的文本.主要问题是文本.每当我放大浏览器时,线条保持相同的高度,但其中的文字会增长,并从线条中消失.

有什么css命令我可以使用什么？

我已经尝试过font-size-adjust: none;,-webkit-text-size-adjust: none;但没有一个能奏效.

这是我试图做的小提琴.

我正在为导航栏构建一个带有navbar-fixed-top类的网站.除了我放大之外,它在所有内容上都能正常工作.当我放大移动设备时; 导航栏开始包装并在折叠后转到下一行.

但是,我不希望在放大时影响导航栏,但同时保持不同设备的响应能力.

这是可能的还是有解决方法？

<nav class="navbar navbar-default navbar-static-top lato-reg" id="navMenu">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="index.html"><img src=""></a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li class="hidden">
        <a href="#page-top"></a>
      </li>
      <li class="page-scroll">
        <a href="index.html">Work</a>
      </li>
      <li class="page-scroll">
        <a href="index.html">Writings</a>
      </li>
      <li class="page-scroll">
        <a href="index.html">About</a>
      </li>

    </ul>
  </div>
</div>
<!-- /.container-fluid -->