Question

如果有人可以帮忙的话，有一个奇怪的人吗？

非常基本的手风琴页面

它没有视口元标记，因为网站想要在移动设备上查看时显示完整尺寸，即它看起来非常小而且你必须进行大量的缩放缩放

在移动设备上，页面呈现的是您在页面加载时的预期，但是，当我点击标题展开手风琴时，所有文字都会变大？

有什么想法吗？

http://www.darrencousins.com/lab/accordion/

HTML

<!doctype html>

<head>

    <meta charset="utf-8">

    <title>Accordion</title>

    <link rel="stylesheet" href="assets/css/global.css" />

</head>

<body>

        <div class="pageContainer">

            <h1>Accordion text zoom problem</h1>


            <div class="accordion">

                <div class="accordionPanel">

                    <div class="titleHeader">
                        <p>Title One</p>
                    </div>

                    <div class="contentDetails">
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                    </div>

                </div>



                <div class="accordionPanel">

                    <div class="titleHeader">
                        <p>Title Two</p>
                    </div>

                    <div class="contentDetails">
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                        <p><strong>Sub-Section Title One</strong></p>
                        <p>Lorem ipsum dolor sit amet, ipsum rebum scias sit in. Rei civibus nescis haec in rei completo litus Ephesum, carissimi deo apprehendit Apollonius eius ad te finis puellam. Nuptiarum cui ubi confudit huc apud senex lacrimis ut casus. Amen ad suis </p>
                    </div>

                </div>

            </div>

        </div>


    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script src="assets/js/global.js"></script>

</body>

CSS

    html, body                                              {margin:0; padding:0; font-family:"Arial", sans-serif}

html                                                        {font-size:62.5%}

body                                                    {font-size:1.2em;}

    .pageContainer                                      {width:960px;}
    p                                                   {margin:0; padding:0; font-size:1.2em;}

    /* Accordion */
        .accordion                                      {margin:0; padding:0; border:1px solid red}

        /* Title */
        .accordion .titleHeader                         {background:#00a4dd; color:white; position:relative; margin:0 0 3px; cursor:pointer;}
        .accordionPanel.active .titleHeader             {background:#00a4dd}

        .accordion .contentDetails                      {display:none; margin:0 0 3px; padding:20px 10px; background:white;}

    /* END Accordion */

的jQuery

    $(document).ready(function()
{

        /*-----------*/
        /* ACCORDION */
        /*-----------*/
            $('.accordionPanel .titleHeader').on('click', function()
            {
                $(this).parent().toggleClass('active');
                $(this).siblings('.contentDetails').slideToggle(function()
                {
                    // fixFooter();
                });
            })


            if ( $('.accordionPanel').length )
            {
                $('.accordionPanel').each(function()
                {
                    if ( $(this).hasClass('active') )
                    {
                        $(this).children('.contentDetails').show(function()
                        {
                            // fixFooter();
                        })
                    }
                })
            }

        /*---------------*/
        /* END ACCORDION */
        /*---------------*/

});

$(window).load(function ()
{

});

Answer 1

我设法解决了这个问题。

这个问题似乎在Android中更为突出，在iOS中也是零星的。

当视口元标记不指定且文本包含在隐藏的div中时，无法确定其高度，此动态高度是导致Android使用的原因＆＃ 34;字体提升＆＃34;

为了防止这种提升，简单地在父容器上设置最大高度越大越好。

<强> CSS

.accordion        {max-height:1000000px; margin:0; padding:0; border:1px solid red}

单击手风琴标题时，文本在手机上缩放

1 个答案: