移动web资源整理

【原】移动web资源整理

摘要: 回顾2014年，刚转来到新的部门，很是渴望作出一个所谓的成功产品，心态几乎变了，天天都忙忙碌碌在项目中，把原来阅读和学习的习惯给忽视了，做为一个技术人员，没有经过学习新的知识来充实本身，跟进时代的步伐，是比较致命的；另一点是运动也缺乏了，感受身体不如从前，例如工做太累，晚上容易失眠，让本身感到惶恐... 阅读全文

posted @ 2015-03-03 14:20 白树阅读(2228) | 评论 (23) 编辑

【原】移动web滑屏框架分享

摘要: 本月26号参加webrebuild深圳站，会上听了彪叔的对初心的讲解，“工匠精神”这个词又一次被提出，也再次引发了我对它的思考。专一一个项目并把它作得好，很好，更好...现实工做中，忙忙碌碌，抱着完成任务的想法可能会比较多，而想作得更好，需不惜花费时间精力，孜孜不倦，反复改进产品，把99%提升到99... 阅读全文

posted @ 2014-12-29 19:00 白树阅读(1887) | 评论 (23) 编辑

【原】CSS实现背景透明，文字不透明，兼容全部浏览器

摘要: 11.11是公司成立的日子，16岁啦，我呢3岁半，感谢公司给了这样一个平台，让我得以学习和成长，这里祝愿公司发展愈来愈好~进入主题，每一年11月11号是光棍节，产生于校园，原本只是一流传于年轻人的娱乐性节日，以庆祝本身还是单身一族为骄傲，而现在是各大商家以脱光为由打折促销的时期，成为了所谓的”购物节“... 阅读全文

posted @ 2014-11-13 14:48 白树阅读(3312) | 评论 (10) 编辑

【原】iphone6来了，我该作点什么(兼容iphone6的方法)

摘要: 北京时间2014年9月10日凌晨1点，苹果公司正式发布其新一代产品 iPhone6，相信作webapp开发的同窗对它是充满了好奇和等待，也担忧它带来各类坑爹，高清的分辨率，升级的retina显示屏，咱们该如何作好适配呢？相比iPhone5，iPhone6拥有更高分辨率的retina HD displ... 阅读全文

posted @ 2014-09-12 16:34 白树阅读(4303) | 评论 (16) 编辑

【原】移动web动画设计的一点心得——css3实现跑步

摘要: 今年3月份，因为公司业务须要，我转岗到微信产品部，离开了TID团队，人都是有感情的动物，更况且在一个团队呆了快 3 年，心中十分舍不得，鬼哥说了“天下没有不散的宴席...”，在个人世界里又多了一次离别的伤感(虽然还在隔壁工做)。加入了微信产品中心后，开始新的团队生活，工做比之前忙多了，有时周六也要上... 阅读全文

posted @ 2014-04-26 10:36 白树阅读(6793) | 评论 (24) 编辑

【原】移动web页面使用字体的思考

摘要: 回想2年前刚开始接触手机项目，接到PSD稿后，发现视觉设计师们喜欢用微软雅黑做为中文字体进行设计，因而我写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，细心的产品经理发现页面的字体不是微软雅黑，要求立刻修改，我就惊呆了，还跟产品争执一番。后来了解到的手机系统 ios、andr... 阅读全文

posted @ 2014-03-12 14:29 白树阅读(6526) | 评论 (20) 编辑

【原】HTML5 新增的结构元素——能用并不表明对了

摘要: 作移动端有一段时间，今天有同事问了我 article 和 section 标签的使用，模模糊糊的解释了下，他似懂非懂，有点小尴尬。突然间以为本身有必要再翻翻书籍，重温下 html5 的新元素。html5 新增的结构元素，有的常用到，有的用不上，当页面禁用样式后，它们的展示跟 div 是没撒差异，有同窗可能会说，既然同样，又不影响页面的最终展示，无论是 article 仍是 section 能用就行了。若是考虑实际项目针对用户，我也是这么认为的，但做为一个重构仔，咱们须要让标签语义化，清晰的结构，更好的 seo，利于特殊终端的阅读(无障碍)，此时 html5 标签的做用就很明显了，并非说能阅读全文

posted @ 2014-03-06 18:18 白树阅读(1721) | 评论 (14) 编辑

【原】移动web页面支持弹性滚动的3个方案

摘要: 有段时间一直折腾移动端页面弹性滚动的各类问题，作了点研究，今天作个小分享~传统 pc 端中，子容器高度超出父容器高度，一般使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，因为浏览器厂商的系统不一样、版本不一样，致使有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。上图若是在PC端中，咱们能够利用 position:fixed 和 overflow:auto 进行简单的布局实现咱们须要的效果，而在手机端遇到的问题以下：ios4 和 android2.2 如下不支持 position:fixedios 和 android2.3 如下不支持 overfl 阅读全文

posted @ 2014-02-18 18:28 白树阅读(4156) | 评论 (5) 编辑

【原】如何改变表单元素的外观(for Webkit and IE10)

摘要: 表单元素在网页设计中使用的很是频繁，如文本输入框、单选框、复选框、选择列表、上传文件，它们在浏览器中的展示有自带的外观，为了在视觉上取得更好的产品体验，保持客户端的统一，一般产品经理会提出须要改变它的外观，使用自定义的，对于产品自己来讲这样的要求是加分项，开发在力所能及的范围内应该大力支持。作H5移动开发，并无原生APP开发那样，大部份内容均可以自定义，移动端H5页面受手机系统的影响，不一样的浏览厂商对表单元素的渲染效果差别很大。下图为 iphone4s 、魅族 android4.4 、诺基亚 winphone8 三部测试机下4种不一样表单元素的默认外观展示。从上图咱们能够看出：表单输入框有默认阅读全文

posted @ 2014-01-19 22:03 白树阅读(2058) | 评论 (7) 编辑

让那些为Webkit优化的网站也能适配IE10

摘要: 特别声明：此篇文章由David根据Charles Morris的英文文章原名《Adapting your WebKit-optimized site for Internet Explorer 10》进行翻译，整个译文带有咱们本身的理解与思想，若是译得很差或不对之处还请同行朋友指点。英文出处：http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx中文译文：http://www.w3cplu 阅读全文

posted @ 2014-01-08 23:34 白树阅读(345) | 评论 (0) 编辑

用CSS开启硬件加速来提升网站性能

摘要: 国外一篇文章，有点意思，转载过来，准备尝试下~中文地址：http://www.cnblogs.com/rubylouvre/p/3471490.html原文地址：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css你知道咱们能够在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提高性能吗？如今大多数电脑的显卡都支持硬件加速。鉴于此，咱们能够发挥GPU的力量，从而使咱们的网站或应用表现的更为流畅。在桌面端和移阅读全文

posted @ 2014-01-08 09:29 白树阅读(2000) | 评论 (1) 编辑

【原】迎接微信winphone 5.0 版本的IE10样式兼容

摘要: 微信 Android 5.1 和 iPhone 5.1 已正式发布了，听说本12月底，微信将推出 Winphone 5.0版本，全面支持微信支付，它绑定 IE10 浏览器，那么作微信公众号的 H5 页面，除了作好 webkit 兼容外，IE10 的兼容也是必不可少的。曾经写过《常见CSS3属性对ios&android&winphone的支持》一文，当时写过对Windows Phone 7 和Windows Phone 8的对应的浏览器分别是IE9和IE10作好兼容，但因为产品的特性对 Winphone 支持不友好，项目组也没有对 IE9 和 IE10 进行特别的处理，如今微信支阅读全文

posted @ 2013-12-30 17:32 白树阅读(1872) | 评论 (4) 编辑

【原】高清显示屏原理及设计方案

摘要: 接近年末了，又到产品们赶KPI的时间，开发也跟着辛苦，因而连续加班了4个星期，项目总算有点转机，也终于挤出点时间，写篇文章，just for fun ~高清显示屏原理，以前在团队内作过的一个相似的分享，由于上次有园友问了我手机端css sprite的设计原理，不知道手机端的图片为何是用2倍大，背景... 阅读全文

posted @ 2013-11-26 14:36 白树阅读(6229) | 评论 (28) 编辑

让手机站点像原生应用的四大途径

摘要: 干货来了，在于提高用户体验，很是实用，作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 阅读全文

posted @ 2013-10-28 23:24 白树阅读(1189) | 评论 (3) 编辑

【原】css实现两端对齐的3种方法

摘要: 说到两端对齐，你们并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也很少，咱们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。响应式网页设计出现以来，更可能是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显... 阅读全文

posted @ 2013-08-30 09:42 白树阅读(6979) | 评论 (8) 编辑

【原】常见CSS3属性对ios&android&winphone的支持

摘要: 2个月前，我在博文《webapp开发中兼容Android4.0如下版本的css hack》中写过“那对于作移动网页开发的同事来讲，通常只要作好webkit内核浏览器的展示效果就好了”，在这里纠正下，在目前Wepapp开发中，主要对webkit内核的手机作好各个版本的兼容已经不够了，像其它的高端智能手... 阅读全文

posted @ 2013-08-03 13:56 白树阅读(3733) | 评论 (0) 编辑

【原】webapp开发中兼容Android4.0如下版本的css hack

摘要: 话说如今的手机型号愈来愈多，主要仍是android和ios这2个巨头称霸了江湖，而他们自带的浏览器内核是webkit，那对于作移动网页开发的同事来讲，通常只要作好webkit内核浏览器的展示效果就好了，看起来很简单，其实背后还有一个大坑等着你。虽然说是webkit内核，但页面的展示效果还会受到自身系统的影响，升级后的系统打了补丁，新增了新的属性，支持更多丰富炫丽的效果，那么旧的系统(未升级的)就不支持一些新的属性，开发哥哥就是没有作好低端版本兼容的话，就会产生所谓的bug的，再加上android和ios系统各个版本也会带私有属性或者少带某个属性，因而坑爹的东西就这样产生，各类奇葩的bug，仿佛又阅读全文

posted @ 2013-06-26 15:39 白树阅读(3829) | 评论 (2) 编辑

【原】ZenCoding中经常使用的CSS3样式

摘要: 用ZenCoding这么久了，总结下经常使用CSS3的写法，方便之后查找： PropertyAlias@media print {}@mbox-sizing:border-box;bxz:bbbox-shadow:;bxsh-webkit-box-shadow:0 0 0 #000;bxsh:wborder-radius:;bdrsbackground-size:;bgzbackground-size:auto;bgz:acontent:;cttext-shadow:0 0 0 #000;tsh+ 阅读全文

posted @ 2013-06-20 15:14 白树阅读(632) | 评论 (4) 编辑

【原】使用iScroll.js解决ios4下不支持position:fixed的问题

摘要: 一直折腾position:fixed在ios和android的使用，而事实上这么上流的ios4系统竟然不支持position:fixed，幸运的是苹果公司在ios5系统修复了这个bug，比较理想的解决方案是让全部用户把系统升级到ios5及以上版本，这种想法在国外还好，在国内环境下，由于越狱而不想去升级手机的人不少，若是强迫用户去升级，那可能会把你的产品KS了。而你也不可能跟你老板说ios4什么不兼容那个属性啊，让用户升级啊！老板看到的是结果，你作不出来，别人怎么作得出来呢，这样你老板可能会对你的能力感到怀疑，或者认为你并不专业......那其实回到头来咱们仍是乖乖去作好兼容，要么就找到完美的解阅读全文

posted @ 2013-06-14 15:21 白树阅读(5915) | 评论 (5) 编辑

【原】PNG的使用技巧

摘要: Png是图像文件存储格式，在网页设计中已经不是一个陌生的名词，在前端开发中常用到它，如经常使用CSS 雪碧图。而Png的使用不只仅如此，Png有多少种格式，有哪些特色，PC端中经常使用的Png格式是哪些，手机端最合适的Png格式是什么呢？若是你对这些问题有疑问，那么很开心的告诉你，这里有你须要的答案(*... 阅读全文

posted @ 2013-05-30 17:54 白树阅读(5949) | 评论 (39) 编辑

【原】[webkit移动开发笔记]之禁止触发系统默认菜单

摘要: 在手机webkit浏览器中，用户在某一些按钮上长按3秒钟后，会弹出一个系统的列表，ios和android各自展示不同，列表能够有复制或在在新窗口打开的等操做，这种体验对于按钮来讲是不须要的，按钮上是绑定事件，有特殊功能，而这里系统把它当作一个连接的意义。查看了代码，原来是一个a标签，连接地址为空。<a href="#" class="btn">查看余额</a>找了资料后，ios平台有个解决办法能够经过控制当前元素的-webkit-touch-callout的样式属性为none;属性来禁止触发系统的菜单a{-webkit-touc 阅读全文

posted @ 2013-04-28 11:49 白树阅读(1641) | 评论 (1) 编辑

【原】YUI压缩与CSS media queries下的bug

摘要: 大概是上个月，使用YUI压缩一个css文件后，发现只要是被压缩后的css文件有部分根本没法工做，一直都不知啥问题引发的，让我感到头疼。今天发现了只要是在媒体查询中的样式没法起做用，因而才开始怀疑是media被压缩后引发的bug，对YUI压缩不得不产生成疑问后来谷歌了：果真是YUI引发的bug：上面的图片解释为：若是电脑的YUI compressor仍是旧的版本，压缩中，YUI compressor将media中的and后面重要的空格给删除了，致使media queries失效。后来我查看了电脑的YUI版本，我擦，竟然是2009年8月份，严重out了- - 亲！要与时俱进啊！下载个最新版本后终于阅读全文

posted @ 2013-04-18 18:53 白树阅读(989) | 评论 (0) 编辑

22个HTML5的初级技巧

摘要: 这篇文章原文地址不知道在哪里！无论怎么样，对个人学习仍是有帮忙，先收藏了。Web技术的发展速度太快了，若是你不与时俱进，就会被淘汰。所以，为了应对即将到来的HTML5，本文总结了22个HTML5的初级技巧，但愿能对你进一步学习好HTML5会有所帮助。1. 新的Doctype声明XHTML的声明太长了，我相信不多会有前端开发人员能手写出这个Doctype声明。HTML5的Doctype声明很短，看到这个声明相信你立刻就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器阅读全文

posted @ 2013-03-28 16:12 白树阅读(958) | 评论 (1) 编辑

【原】HTML 5应用程序缓存使用总结

摘要: 近期接触了HTML5本地缓存，在HTML页面的html标签加入后缀为.appcache的文件，便可以轻松地建立 web 应用的离线版本。使用本地缓存带来的好处：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减小服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。浏览器支持：全部主流浏览器均支持应用程序缓存，除了 IEHTML5 Cache Manifest 实例下面的例子展现了带有 cache manifest 的 HTML 文档（供离线浏览）：HTML页面demo.appcache文件Cache Manifest 基础如需启用应用程序缓存，请在文档的 < 阅读全文

posted @ 2013-03-28 15:36 白树阅读(1943) | 评论 (2) 编辑

【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法

摘要: 2012年8月份刚开始接触前端移动开发，如今主要是android和ios系统的手机，一套代码须要同时兼容android和ios，就android而言已经有N个型号的手机，若是css代码在这些手机上解析有稍微差异或者出现bug，那么，作兼容是必不可少，事实上随着手机版本的不断更新，产生一些不一样的体验，这也能够理解为制造了bug~半年多了，遇到了很多问题，解决问题的过程即辛苦又很开心，辛苦是由于刚接触，不少知识都不懂，须要花费不少的时间去摸索遇到的困难，开心呢固然是接触到新鲜的手机开发，感到比较兴奋，学习了很多知识。好了，很少说，开始本次的主题，今天主要对iphone手机的兼容方法作总结。摘要：[ 阅读全文

posted @ 2013-03-21 10:43 白树阅读(2831) | 评论 (0) 编辑

CSS box-flex属性，而后弹性盒子模型简介

摘要: 张鑫旭博客的一篇css3盒模型文章，对我而言，实用价值挺大的，屡次重复打开该文章学习，这一次决定转载到个人博客！1、淡淡的开头语昨天趁着不想工做的时间间隙闲逛24ways，在My CSS Wish List一文中，见到了个新鲜的CSS属性，就是题目中的box-flex，之前没有见过，顿生疑惑，不知是骡子仍是马，因而习惯性谷歌之，真是不谷不知道，一谷吓一跳。倒不是该属性自己，而是此属性做为导火索，让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言，这种盒子模型的出现就比如打麻将杠上开花杠到绝张边七条，让人兴奋不已。在国外，弹性盒阅读全文

posted @ 2013-03-13 22:20 白树阅读(624) | 评论 (0) 编辑

【原】[webkit移动开发笔记]之空连接是使用javascript:void(0)仍是使用#none

摘要: 基于webkit内核的移动开发笔记，以前已经写过4篇，主要是关于移动开发重构的分享，今晚有空了再写一篇。回忆去年年末最后的一个项目，还有一个很怪异的bug，让项目团队的成员感到十分头疼。测试组的同事作完最后的测试回归后，项目发布上线，并经过微信推送连接。在ios系统中(android显示正常)，微信内页打开连接后，点击页面的一个按钮，页面被从新加载了，这时才能够对页面进行其它操做。再次不断测试后，咱们这边的同事确定是微信软件内部配置引发的，但是微信的同事也没法定位具体的问题......纠结了好久....后来啊，想到各类蛋碎，才知道是a标签的引发的<a href="#none&q 阅读全文

posted @ 2013-03-08 00:03 白树阅读(2012) | 评论 (5) 编辑

【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框

摘要: 去年年末，作完最后一个项目就能够开开心心回家，但是在测试阶段，发现了很多bug，为了避免影响回家时间，加班加点也要解决这些问题，这里算是工做回忆，也算是工做的一点小总结。在ios4+和android2+系统，当手指触摸屏幕a标签连接或按钮时，会产生不一样的效果，对于ios点击元素的时候，就会出现一个半透明的灰色背景；对于android则出现红色的边框。对这2个系统自带的效果，这种体验的意义无非为了告知用户按钮已经点击到，带来的价值是好的。惋惜带来了体验的同时，也带来了bug......主要是在android手机的一个bug使用css给模块设置了opacity:0，控制该模块隐藏，若是该模块包含a标阅读全文

posted @ 2013-02-28 12:29 白树阅读(5224) | 评论 (8) 编辑

【转】CSS 与 HTML5 响应式图片

摘要: 关于响应式的，近来国内外也不断提到，仍是目前比较流行的技术话题，这篇文章来至淘宝UED的，讲得是响应式图片，写得很不错。随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也愈来愈高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不一样加载不一样类型的图片，不会形成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。CSS3 响应式图片对于不少 IOS 开发者来讲可能已经不太陌生了，为了适配 Re 阅读全文

posted @ 2013-02-19 20:51 白树阅读(1815) | 评论 (0) 编辑

【原】[webkit移动开发笔记]之CSS3径向渐变

摘要: 谈到渐变，你们并不陌生，设计稿中常常会遇到，其中最多见的也最平凡使用的是线性渐变和径向渐变，在pc端开发，不少大型网站都须要考虑全部浏览器的兼容，一般如渐变的按钮或者背景图通常会被重构师们切成图片，而在移动开发中若是使用图片是很占流量，能不用图片尽可能不使用，那么，CSS3来实现无图的渐变效果是首选的。本文以移动开发中遇到的一个径向渐变例子，讲解CSS3径向渐变在项目中的应用和以及须要注意的地方。1、径向渐变的基础知识径向渐变的概念：从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）。2、径向渐变的基本语法background-image:-webkit-gradient(type,x1 y1 阅读全文

posted @ 2013-02-17 21:26 白树阅读(5513) | 评论 (11) 编辑

【原】[webkit移动开发笔记]之没法自动播放的audio元素

摘要: HTML5新增了video元素和audio元素，替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。此次的一个项目，产品经理要求手机加载开始时播放音乐，想到播放音乐，又是在ios和android平台，那audio元素必然是首选。1、audio的基本知识audio:标签订义声音，好比音乐或其余音频流。2、audio的属性3、audio的写法写法一：你的浏览器还不支持哦写法二：优先播放音乐baishu.ogg，不支持在播放baishu.mp34、audio实战在项目中使用audio，一开始在chrome浏览器下作测试，使用了autoplay和loop属性，在页面打开阅读全文

posted @ 2013-02-05 17:03 白树阅读(4698) | 评论 (20) 编辑

【原】[webkit移动开发笔记]之使用chrome进行手机开发

摘要: Chrome浏览器，相信你们并不陌生，该浏览器是基于其余开放原始码软件所撰写，包括WebKit和Mozilla，以其简单、快速、安全、稳定、扩展丰富等特性受到了很多人的喜好，2012年8月6日，Chrome已达全球份额的34%，成使用最广浏览器。Chrome浏览器提供了很是简单方便的开发人员工具，方便咱们在PC端作手机开发，那么如何是如何在PC上作简单的手机页面开发呢？首先下载chrome最新版本版本 24.0.1312.56（有些旧版的缺乏一些功能，建议更新到最新版本），而后在Chrome浏览器中打开某个页面，选定网页元素(如通栏、文字、图片等)，按鼠标右键，从右键菜单中选择“审查元素”，就阅读全文

posted @ 2013-01-30 18:12 白树阅读(2688) | 评论 (5) 编辑

移动web资源整理

随笔分类 - HTML5/CSS3

公告

重构是作什么的，一个好重构又能作什么

联系方式

搜索

最新随笔

随笔分类(139)

推荐书籍

个人连接

积分与排名

最新评论

阅读排行榜

评论排行榜

推荐排行榜

朋友同事同行

团队博客

推荐资源