移动浏览器下拉菜单中的锚字体大小更改答案

【问题标题】：Ancher font-size in dropdown menu changes in mobile browsers移动浏览器下拉菜单中的锚字体大小更改
【发布时间】：2016-12-05 14:19:05
【问题描述】：

我创建了一个仅限 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>

桌面：

手机：

【问题讨论】：

您是否在 CSS 中明确设置了锚点的字体大小？
不，我没有（完整的 HTML/CSS 包含在 JSFiddle 示例中）。这是因为移动浏览器使链接变得更大以便更容易点击 - 并且移动浏览器识别 JS 并且不会调整这些锚点的大小？
因为我没有 iPhone 来测试和比较我不能说，但当涉及到字体大小时，应该始终设置它们，因为浏览器预定义的样式表不同。
在我的 Windows 10 Mobile 上测试过，同样的问题，这些链接上的字体更大
找到了...为您发布了答案

标签： android html css iphone

【解决方案1】：

不同的是显示下拉菜单的链接inline-block

Updated fiddle

所以做这个改变

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

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

【讨论】：

谢谢，这很好用，我最终得到的代码更少。您是否能够在 Android 手机上使用下拉菜单本身？我无法在 iPhone 以外的任何设备上测试 JS 添加。 JS加之前，只是放大了一秒才到父链接，让菜单没用了。
@Max 在 Windows 10 Mobile 上测试过，有同样的问题，更新后可以工作......我确信它现在可以在 Android 上工作

【解决方案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不支持

.dropdown_parent {
  pointer-events: none;
}

【讨论】：

点击行为已被移除，我想知道为什么某些锚点的大小会改变。