移动端CSS书写注意事项

[yisibl]

例如：

1. -webkit-overflow-scrolling: touch;

   用于修复overflow: scroll时不能平滑滚动的问题。

   • 支持情况：iOS5 beta1 +
   • 实现原理：http://blog.csdn.net/hursing/article/details/9186199
   • 解决方案：使用iScroll模拟

2. [译] iOS 7 之 HTML5 综合测评：亮点、缺点和槽点

3. Android 2.3 -webkit-border-radius 不支持 % 单位？

4. Android Webkit中CSS属性zIndex问题

5. PPT:淘宝移动端Web开发最佳实践

6. devicePixelRatio = 1.5 引发的问题

7. Android 4.2.x 和 三星 Galaxy S4 border-radius 背景色溢出

8. Android Chrome -webkit-overflow-scrolling: touch; 问题

9. 移动端 click 事件 300ms 延迟问题：使用fastclick解决。详见《300 毫秒点击延迟的来龙去脉》

10. iOS 7.1 Safari 的 minimal-ui 属性有一个小 bug，第一次打开页面的时候，window.innerHeight 值不正确。http://github.hjin.me/minimal_ui_bug/

11. http://csstriggers.com 详细记录了常见 CSS 属性的性能。

[yuanyan]

1. 考虑适配当前主流的3种设备宽度，CSS像素宽度分别为：
   • 320px
   • 360px
   • 540px
2. 通过CSS触发渲染对象树分层，尽量让重排重绘发生在最小的节点范围内

暂写这两个吧～

[yisibl]

@yuanyan 三个尺寸分别大致对应什么设备呢？

[yuanyan]

主流的手机，iOS当前都是320px，Android都有，具体设备大都是三星与小米

[yisibl]

恩，那还有 iPad 的竖屏 768px 吧，还有一些安卓平板大概是 600px

[yuanyan]

平板当前估计也是只考虑 苹果家的设备，因为我们的测试同学好像也只有ipad，哈哈～

[ksky521]

具qa童鞋说android平板480也有，不过最常见的是600

[yisibl]

@ksky521 qa童鞋是？

[s5s5]

http://s5s5.me/2902 近一年做项目出来的经验，前几天才写的文章

[ksky521]

@s5s5 note进来就不只是320了，不过还好；我们一般是出640的图，切成320，如果有特殊需求需要适配到480的；android pad太乱，我们一个pad项目，做完了，换了一批apad，几乎都报废了……有的甚至屏幕颜色都很大色差

[s5s5]

@ksky521 想要兼容的越多折腾就越多，尽量用数据说服项目组别支持乱七八的设备吧……

[itchina110]

大家如何解决按钮自适应的问题，宽度，高度的问题。

[wendywangj]

撸主多多分享移动端开发知识啊~~~

[ksky521]

额 前几天我们QA把hd版本的APP装在S4上面，愣是给我们报了个bug，然后我们把最小宽度从480改到320了……@s5s5