Question

我对这个问题的耐心结束了。我在移动网站上工作，但是有一个巨大的，无法解释的错误我无法解决。

我使用Jquery脚本在页面之间交换，它创建一个新的div标签，将新内容放入其中，将其滑到旧内容之上，然后完全从DOM中删除旧内容。这工作正常，除非我更改页面，字体大小减少，大概10像素。线高似乎也发生了变化。我使用Google的元素检查器检查代码，它说文本是30像素，但是当我刷新页面时，它会变大，但仍会显示30像素。

我很难过，我是真的。我不知道原因，因为我有一个控制字体大小的标签，没有其他人对它有任何影响。

这里是Jquery脚本：

$(document).ready(function() {

    function anchorClick(link) {

        var linkSplit = link.split('/').pop();
        console.log(linkSplit);
        $.get('/pages/'+linkSplit, function(data) {

            $("#top").append("<div class=\"content2\" id=\"c2\">hello world</div>")
            $('.content')
            .queue(function(n) {
            $('.content2').html(data);
            n();
            $('.content2').animate({ marginTop: '0px', top: '0px'}, 1000);
            $('.content').delay(1000).fadeOut(100, function(){
            $(this).remove();
            $('#c2').addClass('content').removeClass('content2').removeAttr('id');
            });

            })
            ;
        });

    }

    $('body').on('click', 'a.loader', function(e) {

        window.history.pushState(null, null, $(this).attr('href'));

        anchorClick($(this).attr('href'));


        e.preventDefault();

    });

    window.addEventListener('popstate', function(e) {

        anchorClick(location.pathname);     

    });
});

相关的CSS样式：

h1 {
    text-align:center;
    font:Arial, Helvetica, sans-serif;
    font-size:45px;
}
.content2 {
    margin-top:100%;
    position:absolute;
    top:120%;
    background:#DCDEE3;
    min-height:100%;
}
.content {
    background:#DCDEE3;
}
#top {
width:100%;
background:#DCDEE3;
}
.pdata{
    font-size:30px;!important
    font-family: sans-serif;
}

这基本上是加载到页面中的HTML：

<div class="content">
  <div class="mainbox2 boxy">
  <h1>
  About
  </h1>
    <div class="pdata">
    CONTENT
    </div>
  </div>
</div>

该错误似乎缩小了页面上的所有文本，而不仅仅是特定元素。我在JSFiddle中重新创建它，但它需要从PHP脚本加载

编辑：这似乎只发生在移动视图或手机上。加载新页面时，字体大小减少了大约50％，因为没有任何理由。将字体更改为22像素显示字体大小为22，直到我加载另一页，然后它决定只是无缘无故地缩小它。

Answer 1

我终于找到了这个问题的答案。事实证明，如果您不应用height属性，浏览器（Android上的Chrome是跨多个设备的测试浏览器）会自动使字体大小更大。这些原因尚不清楚。将max-height:99999px;添加到相关的div元素就可以了。现在所有字体大小都是正确的。

更改页面时字体大小减少（修复时修复）

1 个答案: