Search code examples
htmlcssmobile-browser

How to show a link in an HTML page with a huge size?


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:

  • Is there a way to show a link in the mobile browsers in a defined (huge) font-size?
  • Is there a better way to show an button / link (with a link behind), that works on all mobile-browsers?

Solution

  • 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.