移動瀏覽器中下拉菜單中的Ancher字體大小更改

Question

我創建了一個僅CSS / HTML的下拉菜單。 當鼠標懸停在父鏈接上時，將顯示隱藏的下拉菜單。 在移動設備上，包含隱藏菜單的錨似乎突然比其他錨更小。 在桌面上，字體大小與其他任何鏈接一樣。

• 為什么移動設備使這些錨點的字體變小/變大？
• 如何避免這種行為？

JSFiddle上的完整代碼和工作示例： https ：//jsfiddle.net/fL4xj3jc/

<ul class="topmenu_parent">
  <li class="topmenu_link"><a href="home/index">Home</a></li>
  <li class="topmenu_link dropdown_button">
    <a href="javascript:void(0)" class="dropdown_parent">Account</a>
    <div class="dropdown_links">
      <a href="users/profile/1">Mijn profiel</a>
      <a href="users/edit/email">Bewerk e-mail</a>
      <a href="users/edit/password">Bewerk wachtwoord</a>
      <a href="users/search">Zoek gebruiker</a>
    </div>
  </li>
  <li class="topmenu_link dropdown_button">
    <a href="javascript:void(0)" class="dropdown_parent">Berichten</a>
    <div class="dropdown_links">
      <a href="messages/inbox">Inkomend</a>
      <a href="messages/outbox">Uitgaand</a>
      <a href="messages_create/form">Nieuw bericht</a>
    </div>
  </li>
  <li class="topmenu_link dropdown_button">
    <a href="javascript:void(0)" class="dropdown_parent">Pronostiek</a>
    <div class="dropdown_links">
      <a href="predictions/index/1">Jupiler Pro League</a>
      <a href="predictions/index/2">Champions League (voorronde)</a>    
    </div>
  </li>
  <li class="topmenu_link dropdown_button">
    <a href="javascript:void(0)" class="dropdown_parent">Scorebord</a>
    <div class="dropdown_links">
      <a href="predictions/score/1">Jupiler Pro League</a>
      <a href="predictions/score/2">Champions League (voorronde)</a>    
    </div>
  </li>
  <li class="topmenu_link"><a href="home/faq">FAQ</a></li>
  <li class="topmenu_link"><a href="home/logout">Log uit</a></li>
</ul>

桌面：

移動：

Answer 1

區別在於帶有下拉菜單的鏈接以內inline-block顯示

更新的小提琴

這樣做也一樣

.topmenu_link
{
    margin: 0px 50px 0px 0px;
    display: inline-block;
}

/* you can delete this rule */
/* li.dropdown_button
{
    display: inline-block;
} */

Answer 2

只需刪除鏈接的點擊行為即可：

var dropParents = document.querySelectorAll('.dropdown_parent');

for (var i = 0; i < dropParents.length; i++) {
  dropParents[i].addEventListener('click', function(e) {
     e.preventDefault();
  });
}

或在CSS中，但IE <11不支持：

.dropdown_parent {
  pointer-events: none;
}