随笔分类 - 移动web开发
摘要：接近年底了，又到产品们赶KPI的时间，开发也跟着辛苦，于是连续加班了4个星期，项目总算有点起色，也终于挤出点时间，写篇文章，just for fun ~高清显示屏原理，之前在团队内做过的一个类似的分享，因为上次有园友问了我手机端css sprite的设计原理，不知道手机端的图片为什么是用2倍大，背景...
阅读全文
摘要：干货来了，在于提升用户体验，非常实用，做webapp的童鞋不要错过~本文由99根据Kyle Peatt的《A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App》所译英文出处：http://www.mobify.com/blog/beginners-guide-to-perceived-performance/中文译文：http://www.w3cplus.com/performance/beginners-guide-to-perceived
阅读全文
摘要：本文是zawa同事写的一篇博文，相信很多在webapp开发中的同学使用iscroll4会遇到的该问题，问过zawa兄的建议，在这里分享给大家，希望能帮助到各位~原文地址：http://www.zawaliang.com/2013/10/443.html问题：在使用了iScroll4的容器内，当表单元素focus聚焦后键盘出现时，可能会存在iScroll区域高度不更新，滚动异常问题；而且当前聚焦的表单元素可能不出现在可视区域内，影响用户体验。iKeyboardScroll4就是这么一个解决方案Github见：https://github.com/zawaliang/iKeyboardScroll
阅读全文
摘要：说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。 响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式
阅读全文
摘要：2个月前，我在博文《webapp开发中兼容Android4.0以下版本的css hack》中写过“那对于做移动网页开发的同事来说，一般只要做好webkit内核浏览器的展现效果就行了”，在这里纠正下，在目前Wepapp开发中，主要对webkit内核的手机做好各个版本的兼容已经不够了，像其它的高端智能手...
阅读全文
摘要：话说现在的手机型号越来越多，主要还是android和ios这2个巨头称霸了江湖，而他们自带的浏览器内核是webkit，那对于做移动网页开发的同事来说，一般只要做好webkit内核浏览器的展现效果就行了，看起来很简单，其实背后还有一个大坑等着你。虽说是webkit内核，但页面的展现效果还会受到自身系统的影响，升级后的系统打了补丁，新增了新的属性，支持更多丰富炫丽的效果，那么旧的系统(未升级的)就不支持一些新的属性，开发哥哥就是没有做好低端版本兼容的话，就会产生所谓的bug的，再加上android和ios系统各个版本也会带私有属性或者少带某个属性，于是坑爹的东西就这样产生，各种奇葩的bug，仿佛又
阅读全文
摘要：一直折腾position:fixed在ios和android的使用，而事实上这么上流的ios4系统居然不支持position:fixed，幸运的是苹果公司在ios5系统修复了这个bug，比较理想的解决方案是让所有用户把系统升级到ios5及以上版本，这种想法在国外还好，在国内环境下，因为越狱而不想去升级手机的人很多，如果强迫用户去升级，那可能会把你的产品KS了。而你也不可能跟你老板说ios4什么不兼容那个属性啊，让用户升级啊！老板看到的是结果，你做不出来，别人怎么做得出来呢，这样你老板可能会对你的能力感到怀疑，或者认为你并不专业......那其实回到头来我们还是乖乖去做好兼容，要么就找到完美的解
阅读全文
摘要：Png是图像文件存储格式，在网页设计中已经不是一个陌生的名词，在前端开发中经常使用到它，如常用CSS 雪碧图。而Png的使用不仅仅如此，Png有多少种格式，有哪些特点，PC端中常用的Png格式是哪些，手机端最合适的Png格式是什么呢？如果你对这些问题有疑问，那么很开心的告诉你，这里有你需要的答案(*...
阅读全文
摘要：在手机webkit浏览器中，用户在某一些按钮上长按3秒钟后，会弹出一个系统的列表，ios和android各自展现不一样，列表可以有复制或在在新窗口打开的等操作，这种体验对于按钮来说是不需要的，按钮上是绑定事件，有特殊功能，而这里系统把它当做一个链接的意义。查看了代码，原来是一个a标签，链接地址为空。<a href="#" class="btn">查看余额</a>找了资料后，ios平台有个解决办法可以通过控制当前元素的-webkit-touch-callout的样式属性为none;属性来禁止触发系统的菜单a{-webkit-touc
阅读全文
摘要：大概是上个月，使用YUI压缩一个css文件后，发现只要是被压缩后的css文件有部分根本无法工作，一直都不知啥问题引起的，让我感到头疼。今天发现了只要是在媒体查询中的样式无法起作用，于是才开始怀疑是media被压缩后引起的bug，对YUI压缩不得不产生成疑问后来谷歌了：果然是YUI引起的bug：上面的图片解释为：如果电脑的YUI compressor还是旧的版本，压缩中，YUI compressor将media中的and后面重要的空格给删除了，导致media queries失效。后来我查看了电脑的YUI版本，我擦，居然是2009年8月份，严重out了- - 亲！要与时俱进啊！下载个最新版本后终于
阅读全文
摘要：2012年8月份刚开始接触前端移动开发，现在主要是android和ios系统的手机，一套代码需要同时兼容android和ios，就android而言已经有N个型号的手机，如果css代码在这些手机上解析有稍微差别或者出现bug，那么，做兼容是必不可少，事实上随着手机版本的不断更新，产生一些不同的体验，这也可以理解为制造了bug~半年多了，遇到了不少问题，解决问题的过程即辛苦又很开心，辛苦是因为刚接触，很多知识都不懂，需要花费很多的时间去摸索遇到的困难，开心呢当然是接触到新鲜的手机开发，感到比较兴奋，学习了不少知识。好了，不多说，开始本次的主题，今天主要对iphone手机的兼容方法做总结。摘要：[
阅读全文
摘要：基于webkit内核的移动开发笔记，之前已经写过4篇，主要是关于移动开发重构的分享，今晚有空了再写一篇。回忆去年年底最后的一个项目，还有一个很怪异的bug，让项目团队的成员感到十分头疼。测试组的同事做完最后的测试回归后，项目发布上线，并通过微信推送链接。在ios系统中(android显示正常)，微信内页打开链接后，点击页面的一个按钮，页面被重新加载了，这时才可以对页面进行其它操作。再次不断测试后，我们这边的同事肯定是微信软件内部配置引起的，可是微信的同事也无法定位具体的问题......纠结了很久....后来啊，想到各种蛋碎，才知道是a标签的引起的<a href="#none&q
阅读全文
摘要：去年年底，做完最后一个项目就可以开开心心回家，可是在测试阶段，发现了不少bug，为了不影响回家时间，加班加点也要解决这些问题，这里算是工作回忆，也算是工作的一点小总结。在ios4+和android2+系统，当手指触摸屏幕a标签链接或按钮时，会产生不同的效果，对于ios点击元素的时候，就会出现一个半透明的灰色背景；对于android则出现红色的边框。对这2个系统自带的效果，这种体验的意义无非为了告知用户按钮已经点击到，带来的价值是好的。可惜带来了体验的同时，也带来了bug......主要是在android手机的一个bug使用css给模块设置了opacity:0，控制该模块隐藏，如果该模块包含a标
阅读全文
摘要：谈到渐变，大家并不陌生，设计稿中经常会遇到，其中最常见的也最平凡使用的是线性渐变和径向渐变，在pc端开发，很多大型网站都需要考虑所有浏览器的兼容，通常如渐变的按钮或者背景图一般会被重构师们切成图片，而在移动开发中如果使用图片是很占流量，能不用图片尽量不使用，那么，CSS3来实现无图的渐变效果是首选的。本文以移动开发中遇到的一个径向渐变例子，讲解CSS3径向渐变在项目中的应用和以及需要注意的地方。一、径向渐变的基础知识径向渐变的概念：从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）。二、径向渐变的基本语法background-image:-webkit-gradient(type,x1 y1
阅读全文
摘要：HTML5新增了video元素和audio元素，替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目，产品经理要求手机加载开始时播放音乐，想到播放音乐，又是在ios和android平台，那audio元素必然是首选。一、audio的基本知识audio:标签定义声音，比如音乐或其他音频流。二、audio的属性三、audio的写法写法一：你的浏览器还不支持哦写法二：优先播放音乐baishu.ogg，不支持在播放baishu.mp3四、audio实战在项目中使用audio，一开始在chrome浏览器下做测试，使用了autoplay和loop属性，在页面打开
阅读全文
摘要：Chrome浏览器，相信大家并不陌生，该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，以其简单、快速、安全、稳定、扩展丰富等特性受到了不少人的喜爱，2012年8月6日，Chrome已达全球份额的34%，成使用最广浏览器。Chrome浏览器提供了非常简单方便的开发人员工具，方便我们在PC端做手机开发，那么如何是如何在PC上做简单的手机页面开发呢？首先下载chrome最新版本版本 24.0.1312.56（有些旧版的缺少一些功能，建议更新到最新版本），然后在Chrome浏览器中打开某个页面，选定网页元素(如通栏、文字、图片等)，按鼠标右键，从右键菜单中选择“审查元素”，就
阅读全文