# mobileTech
A useful tools or tips list for mobile web application developing
这个项目收集移动端开发所需要的一些资源与小技巧
## 移动端统计 (from BiosSun)
可基于下方所列出的统计数据来决定您要兼容的设备及浏览器。
[百度移动统计](http://tongji.baidu.com/data/mobile/brand "百度移动设备统计")
[友盟指数](http://www.umindex.com/ "友盟指数")
[CNZZ 桌面及移动端浏览器统计](http://brow.data.cnzz.com/ "CNZZ 桌面及移动端浏览器统计")
[全球移动端浏览器统计](https://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=1 "全球移动端浏览器统计")
## 工具类网站
[HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估")
[各种奇妙的hack](http://browserhacks.com/ "各种奇妙的hack")
[几乎所有设备的屏幕尺寸与像素密度表](http://pixensity.com/list/ "几乎所有设备的屏幕尺寸与像素密度表")
[移动设备参数表](http://screensiz.es/phone "移动设备参数表")
[ios端移动设备参数速查](http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/ "ios端移动设备参数速查")
[浏览器兼容表](http://www.quirksmode.org/compatibility.html "浏览器兼容表")
[移动设备查询器](https://deviceatlas.com/device-data/devices "移动设备查询器")
[移动设备适配库](http://51degrees.codeplex.com/ "移动设备适配库")
[移动设备适配库2](http://detectmobilebrowsers.com/ "移动设备适配库2")
[viewport与设备尺寸在线检测器](https://deviceatlas.com/device-data/devices "viewport与设备尺寸在线检测器")
[html5 移动端兼容性速查](http://mobilehtml5.org/ "html5移动端兼容性速查")
[在线转换字体](http://www.fontsquirrel.com/tools/webfont-generator "在线转换字体")
[css3 选择器测试](http://tools.css3.info/selectors-test/test.html "css3选择器测试")
[测试浏览器对 ECMAScript6 的支持度](http://kangax.github.io/compat-table/es6/ "测试浏览器对 ECMAScript6 的支持度")
[兼容性速查表](http://caniuse.com/ "兼容性速查表")
[浏览器的一些独特参数](http://www.browserscope.org/ "浏览器的一些独特参数")
[各种各样的媒体查询收集](http://nmsdvid.com/snippets/ "各种各样的媒体查询收集")
[css3 动画在线制作器](http://css3lib.alloyteam.com/#animation/AnimatedButtons "css3动画在线制作器")
[css3 渐变在线制作器](http://www.colorzilla.com/gradient-editor/ "css3渐变在线制作器")
[移动端手势表](http://ww1.sinaimg.cn/bmiddle/c2c57f68jw1e4fh7dmw12j20fi2w6qe1.jpg "移动端手势表")
[webkit独有的样式分析](http://ued.ctrip.com/blog/wp-content/webkitcss/ "webkit独有的样式分析")
[HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)
[HTML5 POLYFILLS](http://html5polyfill.com/ "HTML5 POLYFILLS")
## iphone6的那些事
[iPhone 6 屏幕揭秘](http://wileam.com/iphone-6-screen-cn/)
## 响应式测试工具
Firefox 浏览器内置了 `自定义设计视图` 的功能，可以通过 `Firefox->Web 开发者->自定义设计视图`（或者摁下 `Shift + Ctrl + m` ）。相比网络工具，运行更加流畅，无需联网。
[判断 iPad 和 iPhone 的版本和状态的 CSS 媒体查询代码](http://yujiangshui.com/document/css-media-queries-for-ipads-and-iphones-chinese-version/)
[Viewport Resizer](http://lab.maltewassermann.com/viewport-resizer/ "resize")
[http://beta.screenqueri.es/](http://beta.screenqueri.es/ "resize")
[http://responsivepx.com](http://responsivepx.com "resize")
[http://www.responsinator.com/](http://www.responsinator.com/ "resize")
[http://resizemybrowser.com/](http://resizemybrowser.com/ "resize")
[https://quirktools.com/screenfly/](https://quirktools.com/screenfly/ "resize")
媒体查询常用样式表：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 竖放加载
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 横放加载
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
## Web app 开发的最佳实践与中文总结
[It’s not a web app. It’s an app you install from the web.](http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/)
[当前 WEB APP 开发的最佳实践](http://lyric.im/best-practice-for-web-app-development/)
[如何自适应网页屏幕](https://www.icloud.com/keynote/AwBWCAESEJd5uucfBPGt6KPotb3tNfsaKm-Q7fqs2-4ojmPoPJuWZCvjYgKl5jEf1URdRgdgNHe38BTzeF3DK7q1ewMCUCAQEEIJ85mw21ii_AwybOqxoF-V02v51Vdg855ED4qVA_8bXr#Mobile_Webpage_如何自适应屏幕_2)
以及[配套的解决方案](https://github.com/unbug/generator-webappstarter/blob/master/app/templates/app/src/util/MetaHandler.js)
[手Q开发过程中经验沉淀](https://github.com/imweb/mobile/issues/2)
[webview性能优化](http://tech.meituan.com/WebViewPerf.html)
## 来自[maxzhang](https://github.com/maxzhang "ava")的一些移动端经验总结干货
[移动Web单页应用开发实践——页面结构化](https://github.com/maxzhang/maxzhang.github.com/issues/8 "ava")
[移动Web产品前端开发口诀——“快”](https://github.com/maxzhang/maxzhang.github.com/issues/1 "ava")
[移动Web开发，4行代码检测浏览器是否支持position:fixed](https://github.com/maxzhang/maxzhang.github.com/issues/7 "ava")
[使用border-image实现类似iOS7的1px底边](https://github.com/maxzhang/maxzhang.github.com/issues/4 "ava")
[移动端web页面使用position:fixed问题总结](https://github.com/maxzhang/maxzhang.github.com/issues/2 "ava")
[移动Web开发实践——解决position:fixed自适应BUG](https://github.com/maxzhang/maxzhang.github.com/issues/11 "ava")
[移动手机浏览器m3u8格式视频流播放支持程度测试](https://github.com/maxzhang/maxzhang.github.com/issues/19 "ava")
## 本资料很多引用了指尖上的js系列
[指尖下的js ——多触式web前端开发之一：对于Touch的处理](http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html "article1")
[指尖下的js ——多触式web前端开发之二：处理简单手势](http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-2.html "article2")
[指尖下的js —— 多触式web前端开发之三：处理复杂手势](http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html "article3")
## 基础知识
### meta标签
meta标签大全 <http://segmentfault.com/blog/ciaocc/1190000002407912>
meta标签，这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
注意根据 [public_00](http://www.weibo.com/avajayam "ava") 提供的资料补充，content 使用分号作为分隔，在老的浏览器是支持的，但不是规范写法。
规范的写法应该是使用逗号分隔，参考 [Safari HTML Reference - Supported Meta Tags](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html) 和 [Android - Supporting Different Screens in Web Apps](
包含javascript的基础语法，面向对象的实现和设计模式实现-javascript.zip
版权申诉
150 浏览量
2024-01-29
21:18:35
上传
评论
收藏 176KB ZIP 举报
包含javascript的基础语法，面向对象的实现和设计模式实现-javascript.zip （139个子文件） 
bind_demo 637B
3 - Adapting an email API.html 6KB 5 - XHR connection queue example page.html 4KB namespace1.HTML 2KB index.html 2KB namespace.HTML 1KB crossDomain.html 278B event.html 232B 2 - In what ways can a decorator modify its component.js 7KB 5 - Menu commands.js 6KB 1 - Form validation.js 5KB 4 - Building an XHR connection queue.js 5KB 1_closure.js 5KB 3 - Tooltip example.js 5KB Library.js 4KB 11 - Edit-in-place example, mixin.js 4KB 9 - Edit-in-place example, classical.js 4KB 10 - Edit-in-place example, prototypal.js 4KB 5 - The findBooks method.js 4KB 6 - Undo with reversible commands.js 4KB 6 - Directory lookup example.js 4KB 2 - Web calendar example.js 4KB 4 - Page statistics example.js 4KB 1 - Car registration example.js 3KB 7 - General pattern for creating a virtual proxy.js 3KB 3 - The role of the factory.js 3KB 4 - Image gallery example.js 3KB 3 - Adding classes to the hierarchy.js 3KB 1 - Structure of the decorator.js 3KB 2-Fully exposed object.js 3KB 5 - General pattern for wrapping a web service.js 3KB 5 - Method profiler.js 3KB 6 - RSS reader example.js 2KB 7 - Undo with command logging.js 2KB 1 - The simple factory.js 2KB 8 - DynamicGallery class with tags.js 2KB 4 - Specialized connection objects.js 2KB Interface.js 2KB 7 - Lazy instantiation.js 2KB 3 - PublicLibrary class with chain of responsibility catalogs.js 2KB 5 - Asymmetrical reading and writing.js 2KB 1 - PublicLibrary class.js 2KB 3-The structure of the chain.js 2KB 6 - DynamicGallery class from Chapter 9.js 2KB 3-Building a chainable JavaScript library.js 2KB 2 - The factory pattern.js 2KB 4 - Types of commands.js 2KB 3 - Wrappers for page specific code.js 2KB 2 - Newspapers and subscribers.js 2KB 1 - PublicLibrary class from Chapter 3.js 2KB 3 - XHR factory example.js 2KB 4 - GenreCatalog and SciFiCatalog classes.js 2KB 4 - Storing instances for later reuse.js 2KB 5 - The Interface class.js 2KB 3 - Building an observer API.js 2KB 9 - Creating XHR objects with branching.js 1KB 1 - StopAd and StartAd classes.js 1KB 7 - An example illustrating the use of the Interface class.js 1KB 6 - Static members.js 1KB 3 - The extend function.js 1KB 1 - The flexibility of JavaScript.js 1KB 2 - PublicLibrary class with hard-coded catalogs.js 1KB 2 - Emulating interfaces with attribute checking.js 1KB 4 - More on adapting an email API.js 1KB 1 - Sellsian approach.js 1KB 3 - Setting styles on HTML elements.js 1KB 2 - Namespacing.js 1KB 4-Using callbacks.js 1KB 3 - PublicLibraryVirtualProxy class.js 1KB 5 - Choosing connection objects at run-time.js 984B 6 - Comparing the two techniques.js 977B 2 - Adapting one library to another.js 968B 5 - Private methods with closures.js 948B reference.js 934B 4 - Animation example.js 909B 5 - Private methods with closures.js 909B 1 - Event listener example.js 848B 4 - Function decorators.js 829B 8 - The augment function.js 778B 4 - Prototypal inheritance.js 739B 4 - Creating an event utility.js 731B 7 - Constants.js 730B 3 - Private methods with underscores.js 719B 3 - Using interfaces with the command pattern.js 694B 2 - Facades as convenience methods.js 676B 3 - The mutability of objects.js 657B 4 - Private methods with underscores.js 637B 2 - The prototype chain.js 636B 2 - Functions as first-class objects.js 634B 5 - Event listeners are also observers.js 621B 1 - Describing interfaces with comments.js 591B 4 - The interface implementation for this book.js 589B 2 - PublicLibraryProxy class.js 519B 2 - Commands using closures.js 511B 2 - Adding operations to FormItem.js 497B 7 - DynamicGallery class with optimization.js 497B 4 - Scope, nested functions, and closures.js 454B 3 - Emulating interfaces with duck typing.js 426B 7 - Mixin classes.js 364B 8 - Branching.js 358B共 139 条
- 1
- 2
资源评论
武昌库里写JAVA
- 粉丝: 3421
- 资源: 1986
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
