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

正常尺寸

Normal size

设备宽度较小

您可以看到右侧的文字大于左侧的文字。这就是造成我问题的原因。

Smaller device width

如何解决这个问题？

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 auto; 字体大小：13像素;

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

iOS显示错误的文字大小

3 个答案: