This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Dear readers, this is a question about the micro channel small program head title, as we all know, now is a variety of mobile phones, usually in the adaptation of the time have to consider the current alien screen and other issues.

1. About cell phones

Let’s take a look at some pictures first

Generally speaking, we should put the title of the article on the text above the mobile phone, but due to the inconsistency of mobile phones, the title is always displayed differently on various mobile phones.

2. Solutions

Because you want the title to be on the same level as the capsule, which is the center line. We can go to get to the device information, the first step is to get to the height of the status bar, the second step is to get the height of the capsule to the status bar, and at the same time with the height of the capsule to the status bar at the bottom of the capsule (capsule) to the status bar height = capsule to the top, so at this time have created a new problem, the capsule to the top, how do we know? Don’t worry. Official also provides an API that wx. GetMenuButtonBoundingClientRect (), the API can get location information to the capsule. const menu=wx.getMenuButtonBoundingClientRect(); Const systemINfo=wx.getSystemInfoSync() const systemINfo=wx.getSystemInfoSync() const top=menu.top SystemINfo. StatusBarHeight / / this is the height of the status bar

So in this case, just make the height of the capsule plus the height from the capsule to the top red line and the height from the bottom red line as the height of the title. In this case, use the line height.

3. The use of API

  1. Wechat applet official provides an API, called wX.getSystemInfoSync (), a variety of see desirable official documents, here attached links. Wechat small program official document, my understanding of it is to get the information of the device, of course, we mainly use the height of the status bar here.
Const systemINfo=wx.getSystemInfoSync(); / / get the position of the capsule const menu. = wx getMenuButtonBoundingClientRect (); . / / the status bar height const statusBarHeight = systemINfo statusBarHeight / / this is capsule distance status bar * 2 plus capsules highly as a title bar, const textHeight=(menu.top-systemINfo.statusBarHeight)*2+menu.heightCopy the code

The textHeight is the height of the title bar

Everyone reads an officer, the article ends here, have improper place, still ask grant instruction.