css - 更灵敏的街景主方向按钮

Question

背景

在混合 Android 应用程序中，我通过 Google Streetview API 获取用户当前位置的图像。我想要做的是提供一组指向四个主要方向的四个按钮——我认为这些是上、下、左、右而不是北、南等，因为电话屏幕的顶部不会一定要指向“北”。这是我现在的做法

.lrdiv{display:flex;}
.ldiv,.rdiv
{
 flex:1;
 text-align:left;
 vertical-align:middle;
 height:2em;
 line-height:2em;
}
.rdiv
{
 text-align:right;
 padding-left:0;
}
.upddiv
{
 text-align:center;
}
#mapJog
{
 padding:0.5em;
 padding-left:80%;
 text-align:right;
 border:1px solid red;
}

<meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height' />

<div id='mapJog'>
<div class='upddiv'>
&#9650;
</div>
<div class='lrdiv'>
<div class='ldiv'>
&#9668;
</div>
<div class='rdiv'>
&#9658;
</div>
</div>
<div class='upddiv'>
&#9660;

</div>
</div>

此处的目的是在当前位置的左/右/上方/下方 200 米处提供街景 View ，具体取决于单击这些按钮中的哪个按钮。

为了使结果更易于可视化，已保留红色边框。虽然这是我关注的布局，但我担心我没有充分解决能够在不同屏幕尺寸的四个按钮上检测点击事件(想想胖手指)的问题。希望这里有人能够提出改进建议，以确保无论屏幕尺寸如何，这种情况始终发生。

Answer 1

最简单的是使用伪元素扩展元素可点击区域。

(function(w, d, last) {
  w.addEventListener("load", function() {
    
    d.getElementById('mapJog').addEventListener('click', function(e) {
      if(last) {
        last.classList.remove('clicked');
      }
      e.target.classList.add('clicked');
      last = e.target;
    });

  });
}(window, document));

.lrdiv {
  display: flex;
}

.ldiv,
.rdiv {
  flex: 1;
  text-align: left;
  vertical-align: middle;
  height: 2em;
  line-height: 2em;
}

.rdiv {
  text-align: right;
  padding-left: 0;
}

.upddiv {
  text-align: center;
}

#mapJog {
  padding: 0.5em;
  padding-left: 80%;
  text-align: right;
  border: 1px solid red;
}

#mapJog div:not(.lrdiv) {
  position: relative;
  pointer-events: none;
}
#mapJog div:not(.lrdiv)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 150%;
  border-radius: 50%;
  border: 1px solid red;  
  pointer-events: auto;
}
#mapJog div.upddiv::after {
  width: 50%;
  height: 220%;
}
#mapJog div.ldiv::after {
  left: 20%;
}
#mapJog div.rdiv::after {
  left: 80%;
}
#mapJog div.clicked:not(.lrdiv)::after {
  background: yellow;
  z-index: -1;
}

<meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height' />

<div id='mapJog'>
  <div class='upddiv'>
    &#9650;
  </div>
  <div class='lrdiv'>
    <div class='ldiv'>
      &#9668;
    </div>
    <div class='rdiv'>
      &#9658;
    </div>
  </div>
  <div class='upddiv'>
    &#9660;
  </div>
</div>