iOS 显示错误的文字大小答案

【问题标题】：iOS displaying wrong text sizeiOS 显示错误的文字大小
【发布时间】：2023-03-14 03:27:01
【问题描述】：

我在 iOS Safari 上遇到了文本大小问题。所有文本都具有相同的大小，但在 iOS 上以不同的大小显示，但在桌面版 Chrome 上则不同。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=1024" />
        <style>
            .content
            {
                width: 984px;
                margin: 0px auto;
            }
            .left
            {
                float: left;
                width: 165px;
                border-right: 1px solid #e0e0e0;
            }
            .page
            {
                margin: 0px 0px 80px 180px;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div>
                <div class="left">
                    <div class="portrait">TEST TEST TEST</div>
                </div>
                <div class="page">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>
        </div>
    </body>
</html>

很遗憾，这在 jsFiddle 中无法显示，因此您必须将其保存为 html 文件并在 Google Chrome 中打开。使用开发者工具 (F12) 并进入设备模式并更改设备宽度时，文本会变大！

正常尺寸

更小的设备宽度

你可以看到右边的文字比左边的大。这就是导致我的问题的原因。

如何解决这个问题？

【问题讨论】：

标签： html ios css mobile mobile-safari

【解决方案1】：

您的视口导致了问题，如果您将其更改为以下内容，它将正确缩放字体大小。

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

不，还是一样。
你试过给它指定字体大小吗？看起来没有分配任何字体大小。
是的，我试过了。此处的代码只是我要修复的网站的一个简约示例。我在其他地方看到过这个-webkit-text-size-adjust 并尝试过，但它不起作用。在 Chrome 中试试看。
是的，这解决了它，但我希望设备“知道”1024px 是正确的宽度。我的布局是 1024px 固定宽度和居中。我该如何正确设置它？
但是布局在桌面浏览器上看起来不太好，因为内容居中并且在 1024px 主要内容之外还有背景内容。

【解决方案2】：

看起来是元标记引起的。你设置<meta name="viewport" content="width=1024" />而不是width=device-width是有原因的吗？

【讨论】：

是的。这是因为我使用了一个固定宽度为 1024px 的布局，它也是居中的。这样移动设备“知道”首选宽度是多少。

【解决方案3】：

您需要为特定的 div 添加字体大小。同时添加媒体查询。

.内容 { 宽度：984px；边距：0px 自动；字体大小：13px;

        }
        .left
        {
            float: left;
            width: 165px; font-size:15px;
            border-right: 1px solid #e0e0e0;
        }
        .page
        {
            margin: 0px 0px 80px 180px; font-size:13px;
        }

【讨论】：