Lesson 3: The Amazing New Mobile Web Article 1: This is Responsive by Brad Frost 各种响应式网站设计的资源. Article 2: Common Mobile Problems 作者做了个问卷调查,调查设计师们在响应式网站设计(RWD,Responsive Website Design)过程中遇到的问题. The lack of a static design phase 与以前设计静态效果图(static scre…

WEB OF DEVICES http://www.w3.org/standards/webofdevices/ MOBILE WEB http://www.w3.org/standards/webdesign/mobilweb JAVASCRIPT APIS CURRENT STATUS http://www.w3.org/standards/techs/js#w3c_all…

自己虽然也注册了CSDN账号,但是没有在上面发表过博客等内容.不过经常在Google里面搜索相关内容时,会显示csdn的结果.这也说明国内很多IT人员都会在CSDN发表博客,记录解决问题过程或者想法.因为之前在学校主要学习是.NET技术,所以自己的博文基本都是在博客园上. CSDN博客有桌面版和移动版,2个版本.今天搜索到是一个移动版吗,搜索出来的地址:http://m.blog.csdn.net/blog/jinzheng069/8783370 截图如下: 第一次用户体验:[失败] 因为移动版…

属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当事件触发后,元素可见) position: relative; //表示相对于浏览器的定位,应用中是相当于前面的容器来定位的 } </style><script type="html/javascript"> $("#bannerControl li:fi…

Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而Weinre就是解决这难题的利器. Weinre的本意是Web Inspector Remote,它是一种远程调试工具.功能与Firebug.Webkit inspector类似,可以帮助我们即时更改页面元素.样式,调试JS等,下面就简单介绍下如何使用.下面以以Windows系统为例: 一.首先确保…

最近公司举办技术大赛,我和同事一起制作了一个叫做10K Hours的Mobile Web App,可以帮助你通过一万小时的努力,成为某个领域的专家.正好前段时间翻译了一本书<HTML5 Mobile Development Cookbook>,中文译本在此.其中讲到了不少移动端Web开发的Best Practices,正好就用到了10K Hours这个应用上.其中我觉得非常有用但是又让人头痛的一个功能就是AppCache:它可以让用户在访问一次网页以后,下次再来时不能访问网络的情况下,也可以使…

https://googleblog.blogspot.com/2015/10/introducing-accelerated-mobile-pages.html October 7, 2015 Smartphones and tablets have revolutionized the way we access information, and today people consume a tremendous amount of news on their phones. Publish…

我们一直坚信Html/css在界面上最终会一统江湖,因为在众多的界面编写中,qt,gtk,wpf,win form, wxwidgets等等,只有Html/CSS是真正拥有统一标准,只有这个有潜力作用一次编写,到处长得一样. 回归正题,我们要编写android和ios的手机客户端程序,要使用定制界面,如果使用原生的Java和objective-c开发,要开发两套界面,并且更要维护两套代码,考虑开发成本太高.而web application+phonegap更适合我们的情况. 然后就有以下框架:我…

为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个).很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要. window.orientation属性与onorientationchange事件 win…

Mobile is no longer on the sidelines. If you’re not already thinking mobile first, you should at least consider it. Let’s go over compelling data that demonstrate the importance of focusing on performance for mobile devices. Business is Booming on th…

http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/ I’ve had an unusual number of interesting conversations spin out of my previous article documenting that mobile web apps are slow.  This has sparked some discussion, both online and IRL.  …

1.高性能CSS3动画 与PC端场景需要相比,移动web端需要考虑的因素也相对复杂,重点考虑:流量.功耗与流畅度.在pc端上考虑更多的是流畅度,而mobile web中需要考虑网络流量的使用和耗电情况. 关于流畅度,在前端动画中主要有两种:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画.然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,…

Automating mobile web apps If you’re interested in automating your web app in Mobile Safari on iOS or Chrome on Android, Appium can help you. Basically, you write a normal WebDriver test, and use Appium as the Selenium server with a special set of de…

Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming…

原文:http://blog.jobbole.com/68606/ 原文出处: 阿伦孟的博客(@allenm ) 第一篇中讲解了如何让手机来请求我们开发电脑上的源码,做到了这步后,我们可以改完代码立即看到效果,但是对于调试还是远远不够的.这篇文章我们继续讲目前常用的几种 Developer tools. PC 端的经验 在使用桌面浏览器开发时,几乎每种浏览器都有自己的开发者工具,比如大家常用的 firebug , chrome develper tools , safari developer…

之前研究了一段时间的appium for native app 相应的总结如下:                                            appium测试环境搭建 :http://www.cnblogs.com/tobecrazy/p/4562199.html   知乎Android客户端登陆:http://www.cnblogs.com/tobecrazy/p/4579631.html appium实现截图和清空EditText:http://www.cnblog…

Silun来给大家介绍几个常见的移动浏览器标签~ 当当当~ <meta name="apple-mobile-web-app-capable" content="yes"> Sets whether a web application runs in full-screen mode. <meta name="apple-mobile-web-app-status-bar-style" content="black&q…

http://blog.templatemonster.com/2010/05/11/how-make-mobile-website-6-easy-tips/ http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/ http://www.webpagefx.com/design-build-mobile-web-site.html http://www.1stwebdesigner.com/tuto…

在移动web应用中,因为没有类似chrome和firebug的调试工具,调试起来比在PC上相对麻烦一些,有时候仅仅能重复进行改动比对,但使用weinre我们能够轻松做到远程调试的功能. 什么是weinre? 官方解释: we是指web,in是指inspector.re是指remote.合起来就是weinre. http://people.apache.org/~pmuellr/weinre/ 怎样安装? weinre基于node,使用npm高速安装: npm install weinre 使用…

1. First you have enable "Developer mode" on your mobile device. (Different device might be different) "Settings" -> Click "Build Number" 7 times. 2. Enable "USB debugging" "Settings" -> "Develo…

在这里,我们向大家呈现20个新鲜出炉的矢量的免费 PSD 素材.这些素材来自著名的设计社区——Dribbble,这个网站的用户不断发布各种精美的用户界面,图标和网站布局,以帮助激励他人.这些免费素材不仅能帮助他们节省大量的时间,而且能有很好的效果. 您可能感兴趣的相关文章 20套精美的免费分页按钮 PSD 源文件 20款免费和创新的 PSD 网页设计模板 404页面下载:漂亮的404错误页面模板 2012年最佳免费 PSD 界面素材揭晓 30款国外企业网站模板 PSD 免费下载 Transpar…

兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些. 但是手机端,虽然出了很多工具,但是调试依然比PC端麻烦很多.而且很多坑是因为手机浏览器本身的bug,一旦出现,相应的解决方案很难根据以前的经验进行推测.只能寄希望于谷歌 + 猜. 这里记录一下我做手机端浏览器曾经踩过的坑.之所以用”曾经”,随着版本的更新,有些问题没了. 另外我(我司)没有足够的人力和物力对很多手机浏览器进行测试,我…

http://blog.csdn.net/kavensu/article/details/8722268 http://cavenfeng.iteye.com/blog/1551516 http://blog.csdn.net/jjfat/article/details/7718240 http://www.gbin1.com/technology/jquerynews/20120710-vanity-jquery-plugins/ http://www.ibm.com/developerwor…

本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了.. 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三种…

兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些. 但是手机端,虽然出了很多工具,但是调试依然比PC端麻烦很多.而且很多坑是因为手机浏览器本身的bug,一旦出现,相应的解决方案很难根据以前的经验进行推测.只能寄希望于谷歌 + 猜. 这里记录一下我做手机端浏览器曾经踩过的坑.之所以用”曾经”,随着版本的更新,有些问题没了. 另外我(我司)没有足够的人力和物力对很多手机浏览器进行测试,我…

第一种, Javascript [javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片 var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/); if(agentID.indexOf("iphone")>=0){ alert("iphone"…

本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了. . 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三…

此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义userAgent 模拟触摸.经纬度.重力感应 模拟4g网络等不同类型的网络 browser-sync 关键词:提升开发效率 安装步骤: npm install -g browser-sync // 以当前目录为根,启动一个静态服务器,文件修改页面自动刷新 browser-sync start --serv…

使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web App  “使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章的数目累积起来也比较多了,为方便大家浏览, Kayo 把这些文章整理成一个目录,收录那些已经写好的文章并会继续更新. 该系列的文章实质上分成四个部分,分别是总体概况.jQuery Mobile 组件.jQue…

Tech Stuff - Mobile Browser ID (User-Agent) Strings The non-mobile stuff is here (hint: you get jerked back by the power cord after 3 feet and your arms start to ache after 10 minutes with non-mobile stuff) or click on any right menu link for the bro…