文章/答案/技术大牛

发布

社区首页 >问答首页 >当单击手风琴标题时，手机上的文本缩放

问当单击手风琴标题时，手机上的文本缩放
EN

Stack Overflow用户

提问于 2014-03-21 07:33:20

回答 1查看 128关注 0票数 0

如果有人能帮忙的话会有奇怪的结果吗？

非常基本的一页手风琴

它没有viewport meta标签，因为站点希望在移动上查看时显示完全大小，也就是说，它看起来非常小，您必须做大量的压缩缩放。

在手机上，页面如你所料在页面加载时呈现，但是，当我点击标题来展开手风琴时，所有的文本都变大了吗？

有什么想法吗？

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

<!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 ()
{

});

accordion

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-26 15:14:39

我已经修好了。

这个问题在安卓系统中似乎更加突出，在iOS中则是零星的。

当视图端口元标记是而不是指定的，文本包含在隐藏的div中时，它的高度无法确定，这种动态高度是导致安卓使用“字体增强”的原因。

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

CSS

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22552810

复制

相似问题

问当单击手风琴标题时，手机上的文本缩放
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当单击手风琴标题时，手机上的文本缩放EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当单击手风琴标题时，手机上的文本缩放
EN