首页 » 水哥专栏 » 【笔记】移动 Web 前端开发 那些蛋疼事儿

【笔记】移动 Web 前端开发 那些蛋疼事儿

移动 Web 前端开发的设备适配 现在有种“兼容老 IE”的蛋疼感…… 希望刚刚正式颁布的 HTML 5 标准可以让这种现在渐渐改变,而不是又一个“Web 噩梦时代”的开始……

以下是一些优秀参考文章的搜集,是本人肉眼过滤于 sogou.com;而非 URL 的条目则是 肉测心得 ——

响应式设计入门

  1. http://www.cnblogs.com/vajoy/p/3903591.html
  2. http://jinjuan.me/webapp-share-zte/

User Agent(网页客户端 标识符)

  • http://outofmemory.cn/code-snippet/1901/mobile-liulanqi-Us

Meta/Viewport 标签(移动设备适配元数据)

  1. http://sowm.cn/wpjam/article/5FBDBB430CC9E424299B61EC03BF5C42.html
  2. http://wiki.eoeandroid.com/Targeting_Screens_from_Web_Apps
  3. http://wanglery.iteye.com/blog/1926747
  4. http://www.cnblogs.com/stephenykk/p/3822441.html

屏幕像素比

  • http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

Target DensityDPI(安卓中等屏幕专用)

  • http://blog.csdn.net/fengri5566/article/details/9414599

WebView 怪癖(微信内置浏览器 等)

  1. JavaScript 动态设置 Viewportdevice-width 无效,需手动指定 具体像素值(如 320)
  2. device-dpi ≠ medium-dpi(设置无效),最佳效果是手动指定为 medium-dpi
  3. Android 有些版本的 WebView 组件<input type="file" /> 无效,它的调用从底层被拦截,在 JavaScript 层面无异常抛出,程序没被中断

position: fixed 大坑

  1. https://github.com/maxzhang/maxzhang.github.com/issues/11
  2. https://github.com/maxzhang/maxzhang.github.com/issues/2
  3. https://github.com/maxzhang/maxzhang.github.com/issues/7

移动版网页布局技巧

  1. http://www.w3cplus.com/mobile/mobile-terminal-refactoring-mobile-layout.html
  2. http://blog.csdn.net/hursing/article/details/9186199

Flex-Box 布局 基本用法、老版兼容


移动端网页调试 —— HTTP

公网(weinre + 花生壳)

  1. http://www.cnblogs.com/lhb25/p/debug-mobile-site-and-app-with-weinre.html
  2. http://segmentfault.com/q/1010000000941321
  3. http://service.oray.com/question/2480.html

内网(UC 浏览器开发者版 + WiFi)

  1. http://www.uc.cn/business/developer/
  2. http://plus.uc.cn/document/webapp/doc5.html

内网(Firefox 42 + WiFi)

  1. https://developer.mozilla.org/zh-TW/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi

线上网页 JS 日志

  1. http://jslogger.com

触控事件的蛋疼

  1. http://select.yeeyan.org/view/213582/202991
  2. http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html
  3. http://www.aliued.cn/2013/04/27/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8Btouch-event%E7%AF%87.html
  4. http://www.web-tinker.com/article/20364.html

GPU 硬件加速渲染

  1. http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

(绝对是 未完待续……)