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

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;
     }
}