より良い応答性の高いストリートビュー基本方向ボタン

Question

コンテキスト

ハイブリッドのAndroidアプリでは、Google Streetview APIのユーザーの現在の場所の画像を取得しています。私ができることを望むのは、4つの基本的な方向を指す4つのボタンのセットを提供することです。電話スクリーンの上部は北、南などとは対照的に、上、下、左、右であると思います必ず「北」を指す。ここで私は今

.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メートルを提供することを目的とします。

結果が見やすくなるよう赤い枠線が残っています。これは私が考えているレイアウトですが、4つのボタンで異なる画面サイズでタップイベント（太っていると思うもの）を検出できるという問題については適切に対応していないのではないかと懸念しています。うまくいけば、ここの誰かが画面サイズにかかわらず常にこれが起きるように改良を提案することができます。

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>