52

我正在测试我的网站，并且在每个浏览器上都运行良好，除了 iphone 浏览器（我认为它是移动 Safari？），它呈现一段文本，其字体比其他浏览器更大。我已经手动检查了 CSS 并在页面上使用了萤火虫，我可以确认我已经为所有这些设置了相同的大小。我该如何解决？

4

6 回答 6

175

为了稍微改进 Lukasz 的想法，请尝试在 CSS 中使用以下规则：

body {
    -webkit-text-size-adjust: 100%;
}

使用值 '100%' 而不是 'none'，允许所有其他基于 Webkit 的浏览器在使用缩放功能时仍调整文本大小，同时仍保留原始字体大小。

此问题仅出现在现代浏览器中，例如 safari、带有 iPhone 设备的歌剧。解决方案是

使用-webkit-text-size-adjust: 100%附加此样式；或 -webkit-text-size-adjust: none；使用所需的课程，它可以正常工作。示例：我希望仅在请求来自移动设备时应用条件。所以我附加了完全满足我要求的完整导航路径。

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

或者

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

两者都可以正常工作。无需为完整的身体应用样式

于 2011-02-11T07:23:51.270 回答
22

Mobile Safari 确实会尝试调整内容，使其默认在屏幕上可读 - 它与其他浏览器具有不同的默认样式。

我不知道确切的规则 - 但说到字体大小，它似乎是这样工作的：

  • 段落、列表项或其他“文本”元素中的文本：应用作者的样式而不进行调整。

  • DIV 或其他非特定元素内的文本：视为“纯文本”并根据 Mobile Safari 的规则“调整”大小。

所以 - 简短的回答是，将您的文本包装在一个段落中，然后对其应用字体大小规则。

这是一个快速而肮脏的例子：

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p { font-size:10px; }
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

（显然，您应该将font-size规则移至 CSS 文件）。

于 2010-03-30T20:12:09.880 回答
13

我用以下方法解决了同样的问题：

<meta name="viewport" content="width=device-width">

从HTML5Boilerplate目前它在这里

于 2013-04-02T17:41:08.313 回答
12

在你的 CSS 中加入这样的规则，你的问题就消失了：

body {
    -webkit-text-size-adjust: none;
}

编辑： 由user612626提供的更好的解决方案是使用而不是.100%none

于 2010-11-14T17:14:01.110 回答
4

给出 body font-size:100%，然后使用 "em" 方法为您网站中的每个元素指定字体大小。

这将使相应浏览器的字体大小为默认字体大小的100%。例如 iPhone safari 浏览器有 12px = 1em （当然你需要在本地检查默认字体大小）。然后如果你想有10px的字体大小，只需将它除以12，即“0.83em”

我希望你理解，也搜索“css em unit”你会得到更好的洞察力。

于 2010-10-01T13:12:20.707 回答
1

对我来说，其他解决方案不起作用。奇怪的是，我发现的唯一解决方案是将段落容器的宽度增加 2 个像素（通过将左右填充减少 1 个像素）。

这是我试图实现的目标：我希望我的段落适合屏幕的宽度（375px），这样它就不会跳过一行，也不会在文本周围留下空白。

我尝试了从 1.12em 到 1.20em 的所有字体大小组合，它会：

  1. 在文本周围留出重要的可用空间
  2. 跳过一行

...但从来都不是我所期望的完美结果，甚至不是像样的。但是当我将左边的填充和右边的填充减少 1 个像素时，问题就会消失。

我使用-webkit-text-size-adjust: 100%;了其他解决方案，但对我有用的是上面的解释。您可以在下面的图像中看到（文本模糊，但您明白了）现在所有空间都已使用并按预期工作。所以，如果你绝望了，试试这个解决方案，即使这不是一个理想的解决方案。

在此处输入图像描述

于 2020-05-25T14:32:58.183 回答