css - 如何禁用峰值和弹出效果(iPhone 6s 上 Safari 的强压力效果)

Question

我需要在此代码( Bootstrap 环境)中的“a”元素上禁用峰值效果(iPhone 6s 上 Safari 的强压力效果):

<article>
  <div class="gall-thumbnail">
    <a data-toggle="modal" href="mod1#">
      <img src="img.jpg"/>
      <p class="text-center caption">Caption</p>
    </a>
  </div>
  <div class="modal fade" id="mod1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h5 class="modal-title text-center">Caption</h5>
        </div>
        <div class="modal-body">
          <img src="img.jpg" class="img-responsive"/>
        </div>
      </div>
    </div>
  </div>
</article>

我需要禁用它，因为如果在 iPhone 6s 上用 Safari 强烈按下，那么 Bootstrap 的“模态”组件在这里与“峰值”冲突，并且它显示的图片不是放大的 img.jpg。

因此，在 iPhone 6s 上用 Safari 强烈按下时，禁用“a”元素上的“peek”或显示放大的 img.jpg 会很好。

Answer 1

如果你想在 iOS 上“强”按某个元素时禁用浏览，你可以设置 webkit-user-select和 webkit-touch-callout css 中的属性为 none。如果你想在所有“a”标签上阻止它，你可以这样做:

a{
  -webkit-user-select:none;
  -webkit-touch-callout: none;
}