如何在 md(Android)模式下使 ion-menu-button 变大?

huangapple go评论59阅读模式
英文:

How do I make ion-menu-button larger in md(Android) mode?

问题

I changed the font-size of my ion-menu-button (hamburger button) using the following CSS code.

ion-menu-button  {
  font-size: 31px !important;
}

The above code seems to work on my app in ios mode. (See attached screenshot)

如何在 md(Android)模式下使 ion-menu-button 变大?

But that was not the case when I tried running the app on md mode(Android). The hamburger button is still small even and the CSS code doesn't have an impact (See attached screenshot)

如何在 md(Android)模式下使 ion-menu-button 变大?

Some fixes I tried include adding a CSS with .md class to target the hamburger button specifically but it didn't work.

I tried fixing my problem by applying this code from Stack Overflow: How do I make ion-menu-button larger?

After applying the fix above, the hamburger button now has the right size but the toolbar appears to become larger and I don't want my toolbar to look larger that's why I reverted the fix and was hoping someone could help me solve my issue. (See attached screenshot)

如何在 md(Android)模式下使 ion-menu-button 变大?

英文:

I changed the font-size of my ion-menu-button (hamburger button) using the following CSS code.

ion-menu-button  {
  font-size: 31px !important;
}

The above code seems to work on my app in ios mode. (See attached screenshot)
如何在 md(Android)模式下使 ion-menu-button 变大?

But that was not the case when I tried running the app on md mode(Android). The hamburger button is still small even and the CSS code doesn't have an impact (See attached screenshot)
如何在 md(Android)模式下使 ion-menu-button 变大?

Some fixes I tried include adding a CSS with .md class to target the hamburger button specifically but it didn't work.

I tried fixing my problem by applying this code from Stack Overflow: How do I make ion-menu-button larger?

After applying the fix above, the hamburger button now has the right size but the toolbar appears to become larger and I don't want my toolbar to look larger that's why I reverted the fix and was hoping someone could help me solve my issue. (See attached screenshot)

如何在 md(Android)模式下使 ion-menu-button 变大?

答案1

得分: 0

ion-menu-button {
zoom: 1.8;
}

英文:

Simply by using the zoom property:

ion-menu-button  {
 zoom: 1.8;
}

答案2

得分: 0

谢谢您提供的反馈。我通过将 class="ion-no-padding ion-no-margin" 添加到我的 <ion-menu-button> 中,成功解决了我的问题。我不太确定它是如何工作的,但我对这个解决方法感到满意。我的最终代码是:

&lt;ion-menu-button auto-hide=&quot;false&quot; class=&quot;ion-no-padding ion-no-margin&quot;&gt;&lt;/ion-menu-button&gt;
英文:

Thank you for all of your feedbacks. I was able to find a solution to my problem by adding class="ion-no-padding ion-no-margin" to my <ion-menu-button>. I'm not exactly sure how it work but I'm satisfied with this workaround. My final code is:

&lt;ion-menu-button auto-hide=&quot;false&quot; class=&quot;ion-no-padding ion-no-margin&quot;&gt;&lt;/ion-menu-button&gt;

huangapple
  • 本文由 发表于 2023年4月13日 15:23:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76002698.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定