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字體大小在移動瀏覽器中的下拉菜單更改

回答

相關問題