春天来了吗,
午饭后,我轻轻迈着步伐
沐浴在阳光下,
额头微微出汗,
暖风阵阵吹拂着脸,
花开的明媚,
他们叫它狗屎花,
各种颜色,斑斑点点的
青绿,墨绿,随着风飘摆
偶有冬季留下的枯黄在空中旋舞
一切都会过去的,
望着天,又是一年春天。

ios safari浏览器底部touchmove事件无效的BUG?

最近做一个wap页面需要一个层从右侧弹出类似菜单一样的东西,效果比较类似百度百科移动端页面范例里面的效果.

我仿照的做完后.发现有个很神奇的bug,这个bug只会在ios的safari浏览器上出现.就是无法禁止底部浏览器自带区域的touchmove事件,可能表达不太容易理解,首先用iphone(我测试过4s和6p)的safari浏览器打开这个页面DEMO.然后我下面用图片来解释具体操作方式

ios safari bug
ios safari bug

将页面滑至黑色块刚好处于手机浏览器底部,然后触屏滑动发现页面跟着滚动了.本来黑色块属于灰色区域,已经禁止了touchmove事件,而左侧浅灰色区域是可以任意滑动的.

那么这个问题会导致页面看起来不正常.经过多次测试,发现百度百科的页面也是如此,也就是说safari底部有一块区域是无法禁止页面滚动的,除非将当前页面高度设置成屏幕大小相同.但是这个方法并不好.

那么至此,这个问题究竟是safari的问题还是另有其他方法解决呢,我还在研究中…

PS:ios下其他浏览器均正常,android各浏览器均正常

魅族手机MX2原生浏览器字体大小问题

都知道魅族的手机很坑了,我就不多说了.

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,如果你的魅族手机有遇到类似问题,可以试试这个demo测试一下,顺便看下源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meizu mx2 stock browser bug with font size style</title>
<style type="text/css">
* {margin:0;padding:0;}
body * {/*height:150px;*/display: block;}
</style>
</head>
<body>
    <h1 style="font-size:60px;">h1 tag with a font-size 60px style!</h1>
    <p style="font-size:60px;">p tag with a font-size 60px style!</p>
    <span style="font-size:60px;">span tag with a font-size 60px style!</span>
    <strong style="font-size:60px;">strong tag with a font-size 60px style!</strong>
    <a href="#" style="font-size:60px;">a tag with a font-size 60px style!</a>
</body>
</html>

从这个代码中可以看出,所有元素应该都是60px字体大小.

但是又可以发现a标签的字体大小是比以上字体大,实际上a才是60px大小,而其他元素的字体大小则是一个默认值.为什么会这样,请问魅族开发人员!

我发现了一个现象,上面把高度给注释去掉了,也就是”hack”后,则字体大小显示正常,均保持了60px,见demo2…这是什么原因.

鬼才知道!

因此我们一致认为魅族原生浏览器坑爹.我不记得web标准是需要给设定了字体大小的元素加高度的吧…