首页 > 代码库 > 安卓和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的不一样如何解决?
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。