如何防止移动浏览器调整文本大小

Question

如何在移动设备上以与在桌面上相同的方式显示文本？

浅粉色区域中的文字在桌面和移动设备上是相同的。这正是我需要为“推荐”部分（以及许多其他领域）实现的目标！）

谢谢。

桌面视图

移动视图

CSS：

.testimonials{
width: 950px;
display: block;
margin-left: auto;
margin-right: auto;
color: #f3bcd4;
font-size: 11px;}

.testimonials h2{
font-size: 16px;
font-weight: bold;}

blockquote{
margin: 1.5em 0 1.5em;
padding: 0 2.5em 0 2.5em;
position: relative;}

blockquote:before{
color: #f3bcd4;
content: "\201C";
font-size: 5em;
position: absolute;
left: 5px;
top: 0.3em;
line-height: 0.1em;}

blockquote:after{
color: #f3bcd4;
content: "\201D";
font-size: 5em;
position: absolute;
right: 3px;
bottom: 0em;
line-height: 0.1em;}

HTML：

<div class="testimonials">
    <h2>Testimonials</h2>
    <blockquote>
        Pellentesque habitant...
    </blockquote>
    <blockquote>
        Pellentesque habitant...
    </blockquote>
    <blockquote>
        Pellentesque habitant...
    </blockquote>
</div>

Answer 1

<强>解决：

我发现通过向包含文本的div添加float：left样式，移动文本的行为与在桌面上的行为相同。有谁理解为什么？

blockquote {
float: left;
width: 255px;
margin: 1.5em 0 1.5em;
padding: 0 2.5em 0 2.5em;
position: relative;}

Answer 2

尝试

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .testimonials blockquote {
         font-size: 11px !important;
     }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
     .testimonials blockquote {
         font-size: 11px !important;
     }
}

/ * - 或 - * /

 /* iPads (landscape and below) ----------- */
@media only screen and (max-device-width : 1024px) {
    .testimonials blockquote {
         font-size: 11px !important;
     }
}