如何在超大尺寸的 HTML 页面中显示链接？答案

【问题标题】：How to show a link in an HTML page with a huge size?如何在超大尺寸的 HTML 页面中显示链接？
【发布时间】：2015-07-16 09:24:23
【问题描述】：

对于我的网络门户，我有三个简单的 HTML 页面，用于从 iOS、Android 和 Microsoft 商店下载应用程序（如果移动用户从移动浏览器加载门户）。

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

如果用户随后点击/点击按钮/链接，用户将被重定向到商店的下载页面。

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

问题是，应用于链接的fontsize在Windows Phone 和Android 移动浏览器上不起作用。似乎它被简单地忽略了，其他元素（文本）显示正确。链接显示为比文本更小，尽管它应该以 greater 字体显示。在标准浏览器（Internet Explorer、Firefox 和 Google Chrome）中的所有工作方式都应正常运行（包括 Link-font-size）。我也尝试在属性“XX-Large”上设置大小 -> 效果相同...

类 - Windows Phone-Page 示例：

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

链接 - Windows Phone 页面的示例：

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

所以我的问题：

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

【问题讨论】：

标签： html css mobile-browser

【解决方案1】：

第一个问题。

听说过 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 {
    padding:5px;
    border:1px solid black;
    background:#222;
    color:#ccc;
 }
 .link:hover {
    background:green;
 }

所以现在它看起来像一个按钮，但它实际上是一个链接，与media queries 结合使用，您可以让它看起来很漂亮/适合所有屏幕尺寸。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

哇，好快（回答）。
感谢 Vinc 和 Ivan。
如果可以，我会接受这两个帖子作为答案。
我现在已经实现了一个指向所有平台 html 的 “类似按钮”的链接（见下文）并将大小更改为 em。我进一步对代码有一些问题。我已经使用 Dreamweaver 创建了页面，现在已经注意到生成了糟糕的代码（多个标签、错误的标签等）。因此，我现在手动编辑（清理）了代码。此外，似乎（仅）WP- 移动浏览器有 - 为什么会出现 - 表格中 1em 的问题（例如 2 em 有效）。
我的问题现在解决了 iOS （电话和平板电脑）、Android（手机和平板电脑）和 WP（手机）（仅限我显示页面的平台）。
所以.. 我接受 Ivan 的回答（em-tip），这并不意味着 Vinc 的回答是错误/坏的（如果我需要通用页面，我会详细检查，因为我必须学习很多到 css...:-)。
我实现的类到链接作为按钮：

.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;
}

【讨论】：