更好的响应街景主要方向按钮

Question

上下文

在混合Android应用中，我正在获取用户礼貌Google Streetview API的当前位置图片。我想要做的是提供一组指向四个基本方向的四个按钮 - 我认为这些按钮分别为Up，Down，Left，Right，而不是North，South等，因为手机屏幕的顶部不会必然点＆＃34;北＆＃34;。以下是我现在这样做的方法

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13; 这里的目的是根据点击的这些按钮提供当前位置左/右/上/下200米的街景。

留下红色边框以使结果更容易可视化。虽然这是布局，但我担心我没有充分解决能够在不同屏幕尺寸的四个按钮上检测轻敲事件（想想胖手指）的问题。希望这里有人能够提出改进建议，以确保无论屏幕大小如何，都会发生这种情况。

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>