Tag Archives: CSS

IE下创建style标签出现未知错误的问题

动态创建一个style标签并设置css内容: 上面的代码看起来没有问题,但在IE6/7/8下访问你会发现提示出现未知错误。测试后发现问题出现在style.innerHTML这句上面,换成innerText依然报错。 解决方法是使用IE独有属性styleSheet.cssText,修改后是这样:

<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> 前端开发 | <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> | Leave a comment

使用JavaScript实现media queries检测

最近在做一个项目,项目中需要根据用户的设备来加载不同的样式,比如同一个页面,如果是PC访问,则显示PC版样式,手机访问则显示mobile样式。这个是一个不完全属于响应式的设计。QQ会员下面有大量的活动页面,不同的活动页面结构会随主题而改变,不像首页之类的频道页。为了使手机用户也能获得更好的体验,我们专门设计了一套移动模版样式。 开始的时候我们直接使用css media query加载样式: 总体还Ok,各个浏览器都能兼容。此时产品观察到了一个问题,在PC下如果缩小浏览器窗口,则会切换到mobile.css,由于mobile.css是一套固定风格的样式,突然变换了风格,用户感觉起来将会很怪。于是我们就想区分PC与手机设备。 media: min-width 指的是浏览器窗口宽度,等价于document.documentElement.clientWidth;min-device-width 是设备宽度,等价于window.screen.width。 我们想到使用min-device-width进行判断,很显然这个行不通,很多设备的device-width比PC分辨率还宽。 最后也没能找到使用CSS控制的办法,只能是让JS来检测了。 最简单的方法是使用window.matchMedia: 但可惜目前在移动设备上支持度还不够。 换一个思路,先通过检测UA来区分移动设备与PC: 移动设备UA正则:/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/,这个正则可以匹配90%的移动设备。 下一步就是实现类似css media 检测。思路大致是向页面中插入一端带media规则的css代码,设置某个元素的css属性,然后在通过脚本获取这个属性进行对比。 完整检测代码如下: 其中的detectStyle可以根据需要进行定义,或者抽出一个API,把需要检测的css属性做为变量。 案例展示:http://youxi.vip.qq.com/game/act/201304/nz.html 手机可以扫描二维码访问:

<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> 前端开发 | <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> , | Leave a comment

解决iScroll横向滚动区域无法拉动页面的问题

近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件。这个体验是实在是无法接受,特别是页面中有多个横向滚动区域时,很容易触碰到这种区域,这时用户将觉得页面很卡。 Google搜了一下,看来很多人都为这个问题而烦恼。有高人给出了解决方案,在这里可以找到。 代码如下: 重写onBeforeScrollStart事件,判断touch的滑动距离,只在横向滑动距离大于竖向滑动距离时 (也就是左右滑动时)才取消默认事件,这样就不影响页面滚动了。看iScroll源码,onBeforeScrollStart: function (e) { e.preventDefault(); }, 它默认是直接取消默认事件。 到这里的时候感觉就不错了。但是不要高兴的太早。 上下滑动横向滚动区域,页面确实可以滚动了,但在多体验了几次页面之后,又出现了一个问题。 先左右滑动该区域,滚动停止后再按住该区域想滚动页面,你会发现它还是不能滚动页面, 这时你再点击一次该区域,这时可以了。这相对于你需要触摸2次才能滚动页面, 这样的行为还是让人无法接受。 经过多翻测试,我把问题锁定到absDistX/Y上。最后发现,在左右滑动之后absDistX/Y的值不会重置,第二次滑动该区域时执行onBeforeScrollStart事件,里面absDistX/Y值是上一次的值,所以程序还是阻止了页面滚动。 解决方法如下: 在onTouchEnd里面做处理,每次滑动之后都重置absDistX/Y的值。为什么要使用setTimeout?其实是为了防止误判断,太敏感也不好,有时候你只是想左右滑动虽然滑动的角度有点朝上或朝下。 Ok,现在终于爽了,想怎么滑都行。体验一下!

<span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> 前端开发 | <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> , , | Leave a comment