Vraag Probleem met verticale uitlijning van tekst in android en ios


Ik heb een site gemaakt waarin alle teksten voor sommige pixels op Android-tablet en -mobiel staan ​​in vergelijking met desktop.

Zou graag een klein voorbeeld willen kopiëren.

Hier is mijn html-code:

<body>
      <h3>MAKING OF</h3>
</body>

Hier is de CSS-code:

body {
    text-align: center;
    padding-top: 50px;
}
html {
    font-size: 62.5%;
}
@font-face {
    font-family: MPL;
    src: local("MPL"),
    url(fonts/MPL.ttf),
    url(fonts/MPL.eot);
}
h3 {
    font-family: MPL;
    font-size: 30px;
    font-size: 3rem;
    height: 60px;
    line-height: 60px;
    padding: 0px 12px;
    background-color: #5496F2;
    color: #000;
}

Mag iemand de reden weten waarom de tekst niet correct op de tablet is uitgelijnd.

Dit is de schermafbeelding van de juiste uitlijning in de desktopbrowser enter image description here

En hier is de schermafbeelding van het probleem in de tabletbrowser enter image description here

Op het bureaublad werkt dit goed, zowel in FF als in Chrome, maar op een Android-tablet is het verkeerd uitgelijnd zoals in Chrome en FF-browsers, ook werkt het niet goed op ios Safari-browser. Hier is de link:

http://inants.com/kadmos/web/kad/a/a

Ik hoop dat iemand dit probleem zal helpen begrijpen en de beste oplossing zal voorstellen.

Bedankt.


12
2018-01-23 13:13


oorsprong


antwoorden:


Zijn geconfronteerd met een soortgelijk probleem. Lijkt op het aangepaste lettertype dat het probleem veroorzaakt. Probeer het aangepaste lettertype te vervangen door iets generieks, zoals Sans-serif. Nog niet zeker hoe het probleem kan worden opgelost door hetzelfde aangepaste lettertype te gebruiken dat het probleem veroorzaakt.


2
2018-05-05 06:27



Heb je geprobeerd om de css-eigenschap 'vertical-align' te gebruiken? Proberen deze.


-2
2017-07-10 15:29