iOS 显示错误的文字大小

Question

我在 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) 并进入设备模式并更改设备宽度时，文本会变大！

正常尺寸

更小的设备宽度

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

如何解决这个问题？

Answer 1

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

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

Answer 2

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

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

iOS 显示错误的文字大小

iOS displaying wrong text size

html

css

mobile

mobile-safari

ios