Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

移动端CSS书写注意事项 #8

Open
yisibl opened this issue Dec 26, 2013 · 13 comments

Comments

@yisibl
Copy link
Contributor

commented Dec 26, 2013

例如:

  1. -webkit-overflow-scrolling: touch;

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

  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

This comment has been minimized.

Copy link

commented Dec 26, 2013

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

暂写这两个吧~

@yisibl

This comment has been minimized.

Copy link
Contributor Author

commented Dec 26, 2013

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

@yuanyan

This comment has been minimized.

Copy link

commented Dec 26, 2013

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

@yisibl

This comment has been minimized.

Copy link
Contributor Author

commented Dec 26, 2013

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

@yuanyan

This comment has been minimized.

Copy link

commented Dec 26, 2013

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

@ksky521

This comment has been minimized.

Copy link

commented Dec 27, 2013

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

@yisibl

This comment has been minimized.

Copy link
Contributor Author

commented Dec 27, 2013

@ksky521 qa童鞋是?

@s5s5

This comment has been minimized.

Copy link

commented Dec 27, 2013

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

@ksky521

This comment has been minimized.

Copy link

commented Dec 27, 2013

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

@s5s5

This comment has been minimized.

Copy link

commented Dec 27, 2013

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

@itchina110

This comment has been minimized.

Copy link

commented Feb 11, 2014

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

@wendywangj

This comment has been minimized.

Copy link

commented Mar 18, 2014

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

@ksky521

This comment has been minimized.

Copy link

commented Mar 20, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.