How does the lineheight of Android and iOS work?

Lineheight on the PC side of the display is normal, but in the phone is very different, on the Iphone6, set the Lineheight, but the text above a few pixels, if you set the Lineheight in 35px button (with span), It is obvious that it is not horizontally centered.

Baidu Search, found that the phone rendering is not the same, but there is no use of CSS how to compatibility problems, so I would like to use JS to do a browser judgment, to do compatible

The JS code is as follows:

Detects the Android system or Iosvar client = function () {var system = {Ios:false,android:false};var U = navigator.useragent;if (!! U.match (/\ (i[^;] +;( U;)?  Cpu.+mac OS x/)) System.ios = True;if (U.indexof (' Android ') >-1 | | u.indexof (' ADR ') >-1) system.android = True;return {System:system};} ();//JQ Code $ (function () {//andriod and iOS line-height problem function lineheight (ele) {var lh = parsefloat (Ele.css (' Line-height ')); function iosline_heiht () {//If you do the project's Wow, here set the argument, the parameter is the trigger effect of the node element ele.css ({' Line-height ': (lh-1) + ' px ', ' Padding-top ': ' 1px '}); function Andriodline_heiht () {  ele.css ({' Line-height ': (lh-2.5) + ' px ', ' padding-top ': ' 2.5px '});} if (lh<35) {//when the line height is less than 35, do so, otherwise do not do so if (Client.system.ios) iosline_heiht (); if (client.system.android) andriodline_ Heiht ();}} Enter whether it is iOS or andriod$ (' #box '). html (' System.ios: ' +client.system.ios+ ' <br/> ' + ' system.android: ' + client.system.android);//Call Lineheight ($ ('. LH '));

The display results are as follows:

How does the lineheight of Android and iOS work?