首页 > 代码库 > 安卓和ios的lineheight的不一样如何解决?

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

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

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

js代码如下:

//检测android系统还是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代码$(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‘));

显示效果如下:

技术分享

 

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