iphoneX适配

Posted 2021-03-15 fdd-111

最近小伙伴说她的下个项目是移动端的，她说她没搞过移动端的东西以后要多问问我这个菜鸡，然后脑子里一下子冒出来之前困扰我很久的适配问题，突然想起来还没做记录，趁我代码还没删我先在这里记录一手，万一下个项目我又碰到移动端了也免得忘了又到处去问度娘（遥远的七八个月之后，北漂小菜不想呆在北京啦，哭唧唧）

因为iphoneX这个该死的刘海屏，竟然是放了个刘海遮住界面的一部分，这就很气，你写出来的界面的上面就会被刘海给遮住，如果有个按钮啥的点也点不动

解决办法就是把整个界面抠出来，然后再把整体界面往下移单位个刘海的高度的距离

 <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,view-fit=cover"/>

这里面的view-fit = cover就是点睛之笔，相当于把整个界面抠出来

但是抠归扣，本来安卓跟iphoneX以下的机子的界面就是整个平铺的，你不能影响其他的界面吧，因此适配之所以叫做适配，是因为只对要适配的机子生效咯

于是在你的界面里放一个旨在iphoneX情况下才生效的样式：

   @media only screen and (device-width: 375px) and (device-height: 812px) and
    (-webkit-device-pixel-ratio: 3){
      .iphoneX {
          /* 防止页面被刘海遮住 */
          top: 42px;
      }
    }

这个宽高可以根据手机尺寸换一换，因为苹果不止X有刘海呀，所以其他的机型同理改宽高就好啦