龙空技术网

原创,谷歌chrome浏览器字号不能小于12的终极解决方案

切图和跨屏 1548

前言:

当前你们对“jquery判断是否chrome”大体比较关心,我们都想要分析一些“jquery判断是否chrome”的相关知识。那么小编在网上网罗了一些关于“jquery判断是否chrome””的相关文章,希望兄弟们能喜欢,大家快快来了解一下吧!

做前端的基本都知道 chrome谷歌浏览器下字号一旦小于12px的时候,都会显示12px,这是一个很早就存在的问题了,原因是谷歌是一家很注重用户体验的公司,旗下浏览器chrome也不例外。

在他们看来,中文字体一旦小于12px就会影响阅读,所以我们终于知道这不是谷歌的bug,是他们特意为之的。

那么有些个别的情况,一定要小于12px,该怎么办呢?

有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none;

但是随着chrome的更新,这个已经不能有效了,于是又有了下面的针对chrome的css hack。

@medias creen and(-webkit-min-device-pixel-ratio:0){

-webkit-transform:scale(0.8);

}

随着版本的更新,这个又用不了了。

无奈

最后用了1个小时写了终极方案,不管在如何升级它都是有效的,经过反复测试有效,基于jquery。

//判断是否chrome

var isChrome = window.chrome == undefined ? false : true;

//方法

$(function(){

if(isChrome){

$('.chrome').each(function(){

var obj = $(this);

var fs = obj.data('fs');

obj.css({'font-size':'12px', '-webkit-transform':'scale('+ fs/12 +')'});

})

}

})

使用

<h1 class="chrome" data-fs="8">切图网是专门做h5前端的公司</h1>

data-fs="8" 是字号为8px的意思。

---

切图网 原创,专注psd转html5等前端开发。

标签: #jquery判断是否chrome