在 xxx.html 的 head 加上

/*
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例(几倍)
minimum-scale=1.0：表示最小的缩放比例(几倍)
maximum-scale=1.0：表示最大的缩放比例(几倍)
user-scalable=no：表示用户是否可以调整缩放比例
*/
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

移动端媒体查询的一些尺寸参考

/*iPhone5/SE */
@media screen and (min-width: 320px) and (max-width: 359px) {
  html {
    font-size: 12.8px;
  }
}
/* Galaxy S5 */
@media screen and (min-width: 360px) and (max-width: 374px) {
  html {
    font-size: 14.4px;
  }
}
/* iPhone6/7/8 iPhoneX*/
@media screen and (min-width: 375px) and (max-width: 385px) {
  html {
    font-size: 15px;
  }
}
@media screen and (min-width: 386px) and (max-width: 392px) {
  html {
    font-size: 15.44px;
  }
}
@media screen and (min-width: 393px) and (max-width: 400px) {
  html {
    font-size: 16px;
  }
}
/* iPhone6/7/8 plus */
@media screen and (min-width: 401px) and (max-width: 414px) {
  html {
    font-size: 16.48px;
  }
}
/*iPad */
@media screen and (min-width: 750px) and (max-width: 800px) {
  html {
    font-size: 30.72px;
  }
}