Ik heb een mobiele webapplicatie met een ongeordende lijst met meerdere items met een hyperlink in elke li:
Mijn vraag is: hoe kan ik de hyperlinks zo opmaken dat ze NIET van grootte veranderen wanneer ze op een iPhone worden bekeken, en de versnellingsmeter schakelt van staand naar liggend?
In de staande modus heb ik de lettergrootte van de hyperlink ingesteld op 14px, maar als ik het apparaat naar de liggende stand schakel, stijgt het tot 20px.
Ik wil graag dat de lettergrootte hetzelfde blijft.
Hier is de voorbeeldcode:
ul li a {
font-size:14px;
text-decoration: none;
color: #cc9999;
}<ul>
<li id="home" class="active">
<a href="home.html">HOME</a>
</li>
<li id="home" class="active">
<a href="test.html">TEST</a>
</li>
</ul>Antwoord 1, autoriteit 100%
U kunt dit gedrag uitschakelen via de CSS-eigenschap -webkit-text-size-adjust:
html {
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
Het gebruik van deze eigenschap wordt verder beschreven in de Handleiding Safari-webinhoud.
Antwoord 2, autoriteit 24%
Opmerking: als u
html {
-webkit-text-size-adjust: none;
}
dan wordt het zoomgedrag in standaardbrowsers uitgeschakeld. Een betere oplossing is:
html {
-webkit-text-size-adjust: 100%;
}
Dit corrigeert het gedrag van de iPhone/iPad, zonder het bureaubladgedrag te veranderen.
Antwoord 3, autoriteit 6%
Gebruik van -webkit-text-size-adjust: geen; direct op html verbreekt de mogelijkheid om in te zoomen op tekst in alle webkit-browsers. U moet dit combineren met enkele mediaquery’s die specifiek zijn voor iOS. Bijvoorbeeld:
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
html {
-webkit-text-size-adjust: none;
}
}
Antwoord 4, autoriteit 3%
Zoals eerder vermeld, CSS-regel
-webkit-text-size-adjust: none
werkt niet meer op moderne apparaten.
Gelukkig komt er een nieuwe oplossing voor iOS5 en iOS6 (todo: hoe zit het met iOS7?):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
U kunt ook , user-scalable=0toevoegen om knijpzoomen uit te schakelen, zodat uw website zich gedraagt als een native app. Als je ontwerp remt wanneer de gebruiker inzoomt, gebruik dan deze metatag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">