Saber 酱的抱枕

Fly me to the moon

03/20
2017
学习

iphone上网页字体变大/显示得很大的解决办法

刚才同事告诉我有个网页的字体很大,果不其然,他是iphone手机。

正常的情况下文字大小一致(css里设置的字号是一样的)如下:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大

在pc端各大浏览器、chrome的手机模拟器、安卓所有主流浏览器上都是正常显示。

但如果iphone上出了问题,就是字号变大:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大
Read More →

iphone上网页字体变大/显示得很大的解决办法

07/2
2016
学习

解决iphone上的Safari会把表单按钮变成默认样式的办法

左:Safari上的按钮表现
右:pc和安卓上的按钮表现

我们在网站上做表单的时候,经常会给按钮自定义一些样式来美化它。例如我们把按钮做成了上图右侧的样式,在pc上和安卓的浏览器上看都很ok。

但是在睾贵的iphone上的睾贵的Safari浏览器上,按钮是有浏览器内置的默认样式的。Safari的内置样式会对我们自己做的按钮进行修改:

1.按钮的高度会改变
2.按钮有了大圆角
3.背景会在我们设置的背景色的基础上添加渐变效果。

解决办法是在css里将按钮元素的-webkit-appearance属性的值设置为none,这样可以取消浏览器对按钮应用内置样式。

input[type="button"],input[type="submit"],input[type="reset"] {-webkit-appearance: none;}

其实这个还不是最糟心的。前天发现某手机站上有些文字在Safari上特别的大,主要出现在文字太多一行放不下的情况。浏览器都会自动把文字换行,但是Safari上自动换行之后这行文字字号变得特别的大。这问题又是只在睾贵的Safari上出现。虽然这可能和网页本身有关系,但我一直没弄明白原因,百度谷歌搜来搜去,也没找到可以解决这个问题的办法。加班整了两小时,毫无进展。最后只能针对iphone特别设置一些样式,从表面上解决了问题。

解决iphone上的Safari会把表单按钮变成默认样式的办法

11/28
2015
学习 软件

Adblock Plus拦截广告的“误杀”

昨天快下班的时候,经理走过来,拿着他的爱疯6对我说道:下午上线的手机站怎么有些地方很空?我拿过手机一看,有些地方的背景图片没有显示出来……

这个问题在网站上线之前我就在电脑上发现过,可是我没去解决。为什么?因为我感觉这算是特例。

有三张背景图片未显示,查看控制台,发现三个图片都遇到了错误。仔细看看还不是404错误,而是net::ERR_BLOCKED_BY_CLIENT:对服务器的请求已遭到某个扩展程序的阻止。

以前在某个站上也遇到过这个问题,当时以为是报的404错误,然而图片路径明明没错啊。现在明白了,我用友♂善的眼神看了看右上角的Adblock Plus。果不其然……

滚过来背锅!我图片名写成ad1.jpg、ad2.jpg于是你就当做ad拦截了?那我要是给body加个名为“ad”的class名你敢不敢拦截整个网页?

考虑到这个网站是移动端竞价网站,浏览者只会在手机浏览器上看到,应该不存在这个问题,于是我就没去改。不曾想,爱疯6的浏览器(经理用的应该就是默认的Safari)竟然先进如斯,整合了Adblock Plus的功能甚至代码?

于是把这三张图的名字随便改了下,这个问题就消失了。

ps:同事爱疯4的Safari没有这个现象。当然,他也没升级ios系统,否则就难说了。

Adblock Plus拦截广告的“误杀”