我的网站顶部有一个工具栏，里面有一些图像和文本链接。我希望文本链接的字体大小可以根据小于400px的屏幕大小进行更改。根据以下来源，我使用@media查询实现了这一点。它是有效的，但问题在于手机的旋转。如果页面是纵向加载的，则会应用@media查询，并且文本会更改大小。当旋转到横向时，@media查询规则将全部正确删除。当旋转回纵向时，将重新应用除字体大小之外的所有@media查询规则。这意味着文本太大。我拍了一个屏幕截图来显示这一工作：
https://i.imgur.com/TEYORH1.mp4
如果需要，我可以提供更多的代码，但目前我无法提供到该网站的链接。提前感谢您的帮助！
/* CSS */
.toplinks {
font-size:20px;
text-align:center;
}
@media screen and (max-width: 399px) {
.toplinks {
font-size:15px;
text-align:left;
padding-left:60px;
font-family: 'Avenir Next Demi';
}
}
/* HTML */
<div class='footercell toplinks'>
<a href='albums.php' style='pointer-events:auto; '>ALBUMS</a> | <a href='singles.php' style='pointer-events:auto; '>SINGLES</a> | <a href='/epk' style='pointer-events:auto; '>EPK</a>
</div>
@Foxlab帮助我尝试了一些事情，最终让我意识到这与媒体查询无关。即使删除了这一点，iOS也决定在旋转和向后旋转时调整文本大小，即使我没有指定这种行为。这似乎太不可靠了，以至于最后我将所有的文本链接转换为文本的SVG图像，这样它们就可以毫无问题地缩放。我可以在它们的CSS类中设置图像的高度，并像以前一样根据屏幕的宽度调整媒体查询中的大小。但现在，使用图像，iOS尊重我指定的尺寸，不会将其更改为它认为应该的尺寸。这样做很烦人，但至少它能工作。
编辑：预期行为，现在使用图像而不是文本：https://i.imgur.com/s7xQOTp.mp4