这是我参与 8 月更文挑战的第 1 天，活动详情查看： 8月更文挑战

各位看官，这是一篇关于微信小程序头部标题的问题，众所周知，现在是各种各样的手机，通常在适配的时候不得不考虑现在的异形屏等问题。

1.关于手机问题

先来几张图片瞧瞧

一般来说我们要把文章标题放在手机正上方文字，但是由于手机的不一致性，导致标题总是在各种手机上不一样的显示。

2.解决方法

因为要把标题和胶囊在同一水平线上，也就是中线一致。我们可以去先获取到设备的信息， 第一步，获取到状态栏的高度，第二步，获取胶囊到状态栏的高度，并同时在胶囊下方加上胶囊到状态栏的高度（胶囊到状态栏的高度=胶囊到顶部），那么此时有产生了一个新的问题，胶囊到顶部我们怎么知道呢，不用担心，官方也提供了一个API，叫wx.getMenuButtonBoundingClientRect()，这个API可以获取到胶囊的位置信息。 const menu=wx.getMenuButtonBoundingClientRect(); const top=menu.top //top就是胶囊到顶部的信息 同时使用wx.getSystemInfoSync()获取状态栏的高度 const systemINfo=wx.getSystemInfoSync() systemINfo.statusBarHeight //这个就是状态栏的高度

所以此时只要让胶囊的高度加上胶囊到上方红线和到下方的红线的高度作为标题的高度，此时用行高即可。

3.API的使用

1. 微信小程序官方提供了一个API，叫wx.getSystemInfoSync(),各种看见可取官方文档，在此附上链接。微信小程序官方文档，我对它的理解就是获取设备的信息，当然我们这里主要就是用状态栏的高度。

   //首先获取设备信息
  const systemINfo=wx.getSystemInfoSync();
  // 获取胶囊的位置
    const menu=wx.getMenuButtonBoundingClientRect();
    // 状态栏高度
    const statusBarHeight=systemINfo.statusBarHeight
    // 这个是胶囊距离状态栏的距离*2加上胶囊高度作为标题栏德高度
    const textHeight=(menu.top-systemINfo.statusBarHeight)*2+menu.height

这个textHeight就是标题栏的高度了 各位看官，文章到此结束，有不妥之处，还请赐教。