一个热爱网络的年轻人的博客
因为页面用了Zepto,自然想到用animate,设置300ms然后scrollTop为当前表单距离网页顶部高度即可。结果发现根本不生效。问同事后一起看源码,才发现Zepto里的animate只能改变CSS,而scrollTop属于js范围,恰巧jQuery又优化过这个,所以jQuery可以这样写,Zepto不行。
去年国庆后,手上项目不多,研究了下手机浏览器里下拉刷新、上拉加载更多这种效果,当时效果是仿照微博客户端来弄的,写了个简单的demo就放在GitHub上没管他了。
每次手机打开图片多的网站,最烦的就是我手机3G网络不给力,图片加载太慢。除非在家用WIFI,在外面使用手机时手机网络网速始终不理想。有没有办法根据网络连接的类型判断加载不同清晰度图片呢?
CSS布局中外边距margin和内边距padding应该是经常用到的属性,不过值除了正数和负数,百分比也是个很有用的。下面就简单介绍margin、padding百分比的情况和使用场景。
首选提一个简单的问题,外层灰色div宽1000px,高500px,里面的黑色div,margin:10%,请问黑色div的margin值是多少?
我的一个项目,开发那边遇到一个bug,他的小米手机UC浏览器里操作消息数目的时候,消息数字永远不出来,然后从别的页面切回去,再回来,就有了。发现我两个Android设备的UC都有这个bug。排查到最后,发现同事在公共代码里加了一句类似:empty{display: none;}代码,最后发现是这家伙的问题。
很多新手朋友经常在群里问,需要移动端手机上幻灯片图片轮播js特效源码。因为我们有同事已经写好了轮播js模块,我每次都是直接调用代码,没怎么写过,所以也帮不上忙。最近手头不忙就自己琢磨着写了swipeSlide玩玩。swipeSlide使用是原生js来处理touch事件,还特别加入Zepto或jQuery的支持,使这个插件可以更灵活,让大家有更好的选择。
自从昨天用了新买的Macbook Pro后,感觉整个互联网网页都模糊了。。。不过还是有一些大型网站对Retina屏幕对了优化处理,由衷感谢各位前端工程师们。
之前在《移动端网页制作入门之二:移动端与PC端间的不同特性》就提到,手机里看图片会模糊,当时提供了两种最常见、简单的办法。这里拓展下,把一些大型网站使用的方法都罗列下。
移动端里对悬浮效果支持不是很好。例如PC端里很常见的页面滚动到一定距离,导航悬浮效果,页面scroll的时候计算滚动条和顶部距离,加fixed就可以了。但移动端里,基本上所有手机,页面滚动的时候,任何js都不会执行。所以手机里这个效果,得等到页面停止滚动,导航才会悬浮。
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧。目前大部份设备,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的,具体兼容表请看caniuse。
请允许我一上来就泼盆冷水。不知道是谁说的:搞移动端吧,移动端是webkit的天下,没有IE6,兼容性简单多了。话虽这样说,但未免太乐观了。我Android的UC浏览器到现在,怎么清除缓存,有个页面的某部分始终没有样式加载,我都想卸载了。。。很少人兼容Windows Phone,我一直在做兼容,也是一堆坑。手机端依旧有兼容性,只是一般不会去写hack而已。