如何在 HTML 页面中显示一个 link 的巨大尺寸？

Question

在我的门户网站上，我有三个简单的 HTML 页面可以从 iOS-、Android- 和 Microsoft 商店下载应用程序（如果移动用户加载门户网站来自移动浏览器）。

在页面上我显示了一些描述文本，并且在页面底部有一个按钮（iOS-页面）和 links（因为按钮不起作用）在 Android 和 Windows Phone 页面上。

如果用户然后 click/tap 按钮 / link，用户将被重定向到商店的下载页面。

我注意到，我必须为所有平台设置不同的字体大小才能达到一般可用的结果。字体大小 到文本 在所有平台上都显示正确。

问题是，应用字体大小到link在[=62=上不起作用 ] Phone- 和 Android 移动浏览器。它似乎被简单地忽略了，其他元素（文本）显示正确。 Link 显示为比文本小得多，尽管它应该显示为 更大的 字体。在标准浏览器（Internet Explorer、Firefox 和 Google Chrome）中，一切正常（包括 Link-字体大小）。我也尝试过设置属性 "XX-Large" -> 相同的效果...

Class - 例如 Windows Phone-Page:

.WP_Link
 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 36px;
   font-weight: bold;
   color: #03C;
}

Link - 例如 Windows Phone-Page:

<a href="http://---the link" title="WP App laden" target="_blank" class="WP_Link">App jetzt aus Shop laden...</a>

所以我的问题：

有没有办法在移动浏览器中以定义的（大）字体大小显示 link？
是否有更好的方法来显示适用于所有移动浏览器的按钮/link（后面有一个 link）？

Answer 1

首先，你应该使用em中的字体大小，这将使跨平台设计更容易。检查这个：CSS font size

然后，你可以在这里查看各个浏览器对各个标签的支持情况：caniuse.com

因此，如果您想要跨浏览器解决方案，最好使用 link 并将其样式设置为按钮。如果你想要一个巨大的字体大小，只需将字体大小设置为高 em 数字。

Answer 2

第一题

听说过 CSS media queries 吗？

/* Big screen */
@media screen and (min-width: 621px) {
    /* Declare here your font-size for large screen (desktop browsers) */
}
/* Small screen */
@media screen and (max-width: 620px) {
    /*declare here your font-size for small screen (mobile screens)*/
}

您也可以将此：<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 放在您的 '' 中。它使每个像素大小相同。

More information about that meta tag

第二个问题

将您的 link 设计成一个按钮。例如：

 .link {
    padding:5px;
    border:1px solid black;
    background:#222;
    color:#ccc;
 }
 .link:hover {
    background:green;
 }

所以现在它看起来像一个按钮，但它实际上是一个 link 并且与 media queries 结合使用，您可以在所有屏幕尺寸下使用它 looking/fitting。

Answer 3

哇，真快（回答）。
感谢 Vinc 和 Ivan。
如果可以的话，我会接受这两个帖子作为答案。
我现在已经对所有 platform-htmls（见下文）实施了 "button-like" link 并将大小更改为 em . 我对代码还有一些问题。我用 Dreamweaver 创建了页面，现在注意到生成了糟糕的代码（多个标签、错误的标签等）。因此，我现在手动编辑（清理）了代码。此外，似乎（仅）WP- 移动浏览器有 - 为什么曾经 - table 中的 1em 问题（例如 2 em 有效）。
我的问题现已解决 iOS（Phone 和 tablet），Android（phone 和 tablet）和 WP (phone)（仅限我显示页面的平台）。
所以.. 我接受 Ivan (em-tip) 的回答，这并不意味着 Vinc 的回答是 wrong/bad（如果我需要通用页面，我会详细检查所有内容，因为我必须学到很多 css...:-).
我将 class 实现到 link 作为按钮：

.WP_Link { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 4em; text-decoration: none; background-color: #EEEEEE; color: #333333; color: #00C; padding: 4px 6px 4px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; }

如何在 HTML 页面中显示一个 link 的巨大尺寸？

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

html

css

mobile-browser