如何防止移动浏览器调整文本大小 [英] How to prevent mobile browser from resizing text

问题描述

如何使文本在移动设备上的显示方式与在台式机上的显示方式相同?

浅粉色区域的文字在桌面端和移动端是一样的.这正是我需要为推荐"部分(以及许多其他领域)实现的目标！

谢谢.

桌面视图:

移动视图:

CSS:

.testimonials{宽度:950px；显示:块；左边距:自动；右边距:自动；颜色:#f3bcd4；字体大小:11px;}.推荐 h2{字体大小:16px；字体粗细:粗体；}块引用{边距:1.5em 0 1.5em；填充:0 2.5em 0 2.5em；位置:相对；}块引用:之前{颜色:#f3bcd4；内容:\201C"；字体大小:5em；位置:绝对；左:5px；顶部:0.3em；行高:0.1em;}块引用:之后{颜色:#f3bcd4；内容:\201D"；字体大小:5em；位置:绝对；右:3px；底部:0em；行高:0.1em;}

HTML:

<h2>推荐</h2><blockquote>Pellentesque 居民...</blockquote><blockquote>Pellentesque 居民...</blockquote><blockquote>Pellentesque 居民...</blockquote>

解决方案

已解决:

我发现通过向包含文本的 div 添加一个 float:left 样式，移动文本的行为就像在桌面上一样.有人明白为什么吗?

blockquote {向左飘浮;宽度:255px；边距:1.5em 0 1.5em；填充:0 2.5em 0 2.5em；位置:相对；}

How do I make the text display on a mobile in the same way it does on a desktop?

The text in the light-pink area is the same on desktop and mobile. This is exactly what I need to achieve for the 'Testimonials' section (and many other areas too!)

Thank you.

Desktop view:

Mobile view:

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>

解决方案

SOLVED:

I found that by adding a float:left style to the div containing the text, the mobile text behaved as it does on a desktop. Does anyone understand why?

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

这篇关于如何防止移动浏览器调整文本大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！