为啥web页面在pc端、移动端显示元素尺寸差特别大？有图

Question

请各位老师打开看大图。图中有详细描述。

1、总之我想请教：我在pc端定义了一个50px的正圆头像，到了手机上就变大了，不是50px
2、我已经添加了如代码，还是无效
3、请教解决之道，谢谢各位前辈。感谢指导

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no" />

Answer 1

你的手机宽度是360px，不是1080px。

Answer 2

楼主看来做的时候用的不是实际值，用的是官方提供的显示分辨率，实际值都是由分辨率除以3或者2来计算出来的，也就是楼主选择一下Chrome浏览器的手机模式下提供的各手机的就接近现实了