移动端开发 干货知识分享

移动端开发 干货知识分享

1、在手机端如果1px线条仍然显示过粗，可以使用css新属性border-image边框图像来解决

例：border-image: url(../img/line-img1.png) 2 0 round;

关于border-image熟悉的介绍：/article/1214988.html

2、在部分安卓机上使用border-image后，发现内容区域设置 :active 后不起作用。

原因：border-image 后面默认加了fill关键字

解决办法：使用的边框图片，图片中间区域背景一定要是透明的。

3、部分安卓机对键盘事件不兼容，如果是对输入框内容监听变化可用input事件

4、部分iphone上，页面内如果有position:fixed固定内容，第一次滑动页面时，固定内容会随页面滑动，松开手后，内容回到原位。bug原因和覆盖范围未知。

解决办法：用js控制固定内容第一次滑动时的的top值

5、防止按钮点击时 背景闪烁

html{

-webkit-tap-highlight-color: transparent;

}

6、设置input的placeholder内容样式的方法

input::-webkit-input-placeholder{

color:#999;

font-size: 14px;

}

7、兼容iOS伪类 :active 需要给 document 绑定 touchstart 或 touchend 事件

document.addEventListener('touchstart',function(){},false);

8、消除 IE10 里 input输入框右侧的叉号

input:-ms-clear{ display:none; }

9、 禁止用户选中文字

-webkit-user-select:none

10、腾讯移动端解决方案

https://github.com/AlloyTeam/Mars

11、移动设备尺寸大全

http://screensiz.es/phone​

12、各种参考手册

css: http://css.doyoe.com/

javascript: https://msdn.microsoft.com/zh-CN/library/yek4tbz0.aspx

zepto: http://www.css88.com/doc/zeptojs_api/

jquery: http://tool.oschina.net/apidocs/apidoc?api=jquery

13、input输入框输入内容后，点击自定义清空内容的按钮，键盘收起的问题

解决办法：按钮用input标签，改变样式为按钮样子，点击删除后，设置原输入框focus();