安卓和ios的lineheight的不一样如何解决？

Posted 2020-08-05

lineheight在pc端上显示很正常，但是在手机就很不同，在iphone6上，设置了lineheight，但是文本上面多了几像素，如果你设置lineheight在35px一下的按钮（用span做的），会发现很明显的不水平居中。

百度寻找，发现是手机渲染不一样，但没有用css怎么去兼容的问题，于是我就想了用js做一个浏览器的判断，去做兼容

js代码如下：

//检测android系统还是ios
var 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代码
$(function(){
//andriod和ios的line-height的问题
	function lineHeight(ele){
		var lh = parseFloat(ele.css(‘line-height‘));
		function iosLine_heiht(){ //如果做项目的哇，这里设置传参，参数为触发效果的节点元素
			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){ //当行高小于35，才这么做，否则不这么做
			if(client.system.ios) iosLine_heiht();
			if(client.system.android) andriodLine_heiht();
		}
	}
	//输入是否是ios或andriod
	$(‘#box‘).html(‘system.ios：‘+client.system.ios+‘<br />‘+‘system.android：‘+client.system.android);
	//调用
	lineHeight($(‘.lh‘));

显示效果如下：