To my web-portal, I have three simple HTML pages to download apps from iOS-, Android- and Microsoft-stores (if a mobile user load the portal from a mobile-browser).
On the pages I show some description text and - at the bottom of the page - I have a button (iOS-page) and links (as button don't work) on the Android and Windows Phone-pages.
If the user then click/tap on the button / link, the user is redirected to the download-page of the shop.
I have noted, that I have to set different font-sizes for all platforms to reach a usable result in general. The font-sizes to the text are showed correct on all platforms.
The problem is, that the applied fontsize to the link don't work on the Windows Phone- and Android mobile browser. It seems as it is simply ignored, where the other elements (Text) are showed correct. The Link is showed way smaller as the text although it should be showed with a greater font. Where in standard-browsers (Internet Explorer, Firefox, and Google Chrome) all works like it should (including Link-font-size). I also have tried to set the size over attributes "XX-Large" -> same effect...
Class - example to Windows Phone-Page:
.WP_Link
{
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #03C;
}
Link - example to Windows Phone-Page:
<a href="http://---the link" title="WP App laden" target="_blank" class="WP_Link">App jetzt aus Shop laden...</a>
So my questions:
First of all, you should use the font size in em, this will make a cross platform design easier. Check this: CSS font size
Then, you can check the support that each browser gives to each tag here: caniuse.com
So, if you want a cross-browser solution is better using a link and style it as a button. And if you want a huge font-size, just set the font size in a high em number.