无法在手机上修改文本字体大小

Question

我在特定的 div 中找到了关于专门针对移动设备修改文本大小的 post，如下所示：

@media only screen and (max-width: 480px) {

.news {
    font-size: 5px;
 }
 }

但是对于我正在处理的网站，我无法让它工作。我希望在移动设备上打开时字体较小。虽然我想知道我是否必须在 html 中设置一个视口元，但每次我这样做 A，它都没有修复它，B，它完全破坏了我网站的平衡，剪掉了大量信息，这我真的不喜欢。所以，我现在能够使用视口的唯一方法是它完全不影响缩放系数。不确定这是否是问题所在。非常感谢对此的任何帮助。完整代码：

css:

*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;

}




#newsusa {

position: absolute; /*makes it relative to the html element, (the first           
positioned element).*/
 width: 100%; /*makes the element 100%, to center it. */
 left: 0px;
 top: 200px;


 }




 .news {
color: white;
font-size: 18px;
}   


li {
list-style-type: none;
}


@media only screen and (max-width: 480px) {

.news {
    font-size: 0.8em;!important;
}
}



@media only screen and (max-width: 280px) {

.news {
    font-size: 0.8em;!important;
}
}

xhtml:

<?php include 'global.php';?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mobiletest.css">
<link href='//fonts.googleapis.com     

/css?family=Iceland|Rationale|Quantico|VT323|Dorsa' rel='stylesheet'      
 type='text/css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3    
/jquery.min.js'></script>


 <div id="newsusa">

<h1 class="appear-later">News</h1>

<div class="spacer1">
</div>

<div class="news">
<ul><?php outputValueFromCache('usnews', 'ignore'); ?></ul>
</div>


<div class="spacer2">
</div>

<h1 class="appear-later">Tech</h1>

<div class="spacer1">
</div>

<div class="news">
<ul><?php outputValueFromCache('usatechnews', 'ignore'); ?></ul>
</div>

<div class="spacer2">
</div>

<h1>Business</h1>

<div class="spacer1">
</div>

<div class="news">
<ul><?php outputValueFromCache('usamoneynews', 'ignore'); ?></ul>
</div>

 </div>






 </html>

Answer 1

您将需要添加

<meta name="viewport" content="width=device-width, initial-scale=1">

到您的页眉。如果您考虑以下代码：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .page-header{
                font-size: 16px;
                color: red;
            }
            @media (max-width: 430px) {
                .page-header{
                    font-size:100px;
                    color: green;
                }
            }
        </style>
    </head>
    <body>
        <h1 class="page-header">Hello</h1>
    </body>
</html>

媒体查询只有在您定义了视口元标记后才有效。我知道这可能不是您想听到的，但我认为这是您的解决方案。

无法在手机上修改文本字体大小

Can't modify text font size on mobile

css

mobile

resize