网页手机横屏竖屏下字体在大小不一样？

最新推荐文章于 2021-05-25 14:13:36 发布

转载最新推荐文章于 2021-05-25 14:13:36 发布 · 2.4k 阅读

本文讨论了一种常见的手机网页浏览问题：在不同屏幕方向下（横屏与竖屏），字体大小发生变化的现象。文章提供了具体的解决方案，即通过在head标签中加入viewport元标签来避免字体自动缩放，确保在不同设备和屏幕方向下字体大小保持一致。

转载自:https://www.zhihu.com/question/19713821

@media screen and (max-device-width: 320px) {
body {
-webkit-text-size-adjust: none;
}
}

@media screen and (max-device-width: 480px) {
body {
-webkit-text-size-adjust: none;
}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-text-size-adjust: none;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
body {
-webkit-text-size-adjust: none
}
}

作者：知乎用户
链接：https://www.zhihu.com/question/19713821/answer/29158367
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

网页手机横屏竖屏下字体在大小不一样？

特意为手机设计的页面，在电脑上测试时可以适应各种宽度。
在手机上浏览时横屏字体大小还比较正常，竖屏后字就自动变小了。

使用的是android，自带浏览器和手机其它浏览器都是同样的问题。

什么情况会导致这种页面自动缩放呢？

======
已解决：
head里增加一行(注意尖括号边上的空格去掉)
< meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport" / >

关注者

被浏览

2918