如果有人可以帮助，您会感到奇怪吗？
非常基本的页面，带有手风琴
它没有视口元标记，因为该网站希望在移动设备上查看时以全尺寸显示，也就是说，它看起来很小，必须进行大量缩放
在移动设备上，页面呈现页面加载时所期望的效果，但是，当我单击标题以展开手风琴时，所有文本变大了吗？
有任何想法吗？
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 ()
{
});
最佳答案
我已经设法解决了。
这个问题在Android中似乎更为突出，而在iOS中则偶发。
如果未指定视口meta标签，并且文本包含在隐藏的div中，则无法确定其高度，此动态高度导致Android使用“字体增强”
为了防止这种增加，只需在父容器上设置一个max-height，越大越好。
的CSS
.accordion {max-height:1000000px; margin:0; padding:0; border:1px solid red}