PC端和手机端网页显示的字体大小不统一怎么解决?

https://img2.mukewang.com/5c9f2735000156ec05220694.jpg

https://img1.mukewang.com/5c9f27290001f21f03890800.jpg

电脑上排版是满页的,在手机上看,字体变小了,下面有很大的空白了。
css属性font-size:12px;

怎样才能让电脑上和手机上看到的文字大小一致呢?

页面头部已经添加了:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
白色DIV是固定px值的;
然后又根据屏幕的尺寸,动态计算了transform: scale(0.741538);
页面是自动缩放到刚合适屏幕展示的。
经过测试和transform缩放无关,和viewport无关,font-size:1em也会变小。目前还是不知道是哪里的原因,字体会小一些。



https://img.mukewang.com/5c9f2729000156ec05220694.jpg


芜湖不芜
浏览 3882回答 4
4回答

慕丝7291255

最后发现应该是字体不一样引起的。这段文字没有指定字体,电脑上默认是微软雅黑,但是手机上默认的不是微软雅黑,有细微的区别的和误差。

繁花不似锦

看截图好像没写viewport(所以看到的其实是整个页面缩小的效果,字当然也会小咯),最好写一下吧,然后再视情况做响应式处理(重新排版,包括处理布局、缩放及DPR响应等)。那就看下设备DPR呗,log下window.devicePixelRatio的值

海绵宝宝撒

固定宽度和transform: scale的问题。移动端可以直接使用媒体查询适配,你使用的transform: scale 同时影响到了字体。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript