Ancher字体大小在移动浏览器中的下拉菜单更改

我已经创建了CSS/HTML专用下拉菜单。当鼠标悬停在父链接上时，会出现隐藏的下拉菜单。在移动设备上，与其他锚点相比，包含隐藏菜单的锚突然具有更小的字体大小。在桌面上，字体大小与其他任何链接相同。Ancher字体大小在移动浏览器中的下拉菜单更改

为什么移动设备为这些锚定字体尺寸变得更小/更大？
我该如何避免这种行为？

的完整代码&工作的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>

桌面：

手机：

来源

2016-07-31 Max

你有没有明确设置锚的在你的CSS字体大小？ – LGSon

不，我没有（完整的HTML/CSS包含在JSFiddle示例中）。这是因为移动浏览器使链接更大，更容易点击 - 而移动浏览器能够识别JS并且不会调整这些锚点的大小？ – Max

由于我没有iPhone来测试和比较，我不能说，虽然说到字体大小，应该总是将它们设置为浏览器预定义的样式表不同。 – LGSon

不同的是用下拉菜单链接显示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; 
} */

来源

2016-07-31 11:04:36 LGSon

谢谢，这个工程很棒，我最终得到的代码更少。您是否可以在Android手机上使用下拉菜单？除了iPhone以外，我还没有能够测试JS附加功能。在添加JS之前，它只是在进入父链接之前放大了一秒，导致菜单无用。 – Max

@Max在Windows 10 Mobile上测试过，遇到同样的问题，在更新后工作......我确信它现在可以在Android上运行 – LGSon

只是删除您的链接的点击行为：

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

来源

2016-07-31 10:31:26 Gatsbill

点击行为已被删除，我想知道为什么某些锚点的尺寸发生了变化。 – Max

Ancher字体大小在移动浏览器中的下拉菜单更改

回答

相关问题