通过智能手机OnePlus 3T在网站上字体大小和img高度过大

Question

我刚刚为浏览器推出了我的网站的移动版本，在我尝试过的所有设备中，包括通过Chrome DevTools的设备仿真程序的许多不同大小的设备，都与我所期望的一样。

然而，一位用户刚刚报告说，他在OnePlus 3T智能手机上看到的图片和文本都太大了。

预计智能手机布局：

​

​

使用OnePlus 3T的布局：

​

​

​

​

我试图在Chrome的设备仿真器中复制它，但没有成功。我在font-size和height的CSS中使用px作为单元。

OnePlus 3T的屏幕有以下规格，我认为这是非常正常的：

尺寸5.5英寸，83.4 cm2 (~73.1%屏体比) 分辨率1080 x 1920像素，16:9比(~401 ppi密度)

知道为什么每件事都显得这么大吗？

这里链接到这样的布局之一，以防有人想要查看它。

更新

显然，这个问题与元标签有关。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

不知怎么的，智能手机正在应用元标签，或者创造同样效果的东西.

Answer 1

通过在标题中添加以下行，问题得到了解决：

<meta name="viewport" content="width=1200, user-scalable=no">

Answer 2

可能听起来很明显，但他是否改变了Android设置下的字体大小或显示大小？

Answer 3

我会使用像em或rem这样的相对测量，而不是px。您可以通过减少较小设备上的字体大小来缩小页面。

@media only screen and (max-width: 600px) {
.icon-selector {
    font-size: 0.8rem;
}}