每周前端知识整理(15.10.25)

本周继续对项目中涉及到的一些小知识点进行总结

1.移动端宽度处理

移动端屏幕的布局都会用响应式布局，页面的宽度基本上都会用百分比来设置。比如页面有左右两部分，宽度都是50%，但是两部分都要有边框，这个时候如果设置width:50%的话，就会导致总宽度超过100%，因为加入了4个边框。此时比较好的解决方法是使用CSS3中新的属性box-sizing(https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

设置属性值为border-box的话，这时的盒状模型中，padding和border就都会被包含到width和height中，这样在设置宽为50%的话，就包括了border。就能达到我们预期的效果了。

2.移动端input表单美化

有时候我们需要在安卓和苹果系统上对input表单进行统一美化，苹果上面可能有些不听话，自带了边框和下陷效果，可以使用下面这个特性进行修正

-webkit-appearance: none;

当我们不喜欢表单点击后出现难看的边框的时候可以这么设置

outline: none;

经过实际测试发现，iPhone上响应点击事件有一点小延迟，操作起来很不爽，点击表单控件也会有延迟，所以使用了一个插件来解决这个问题：fastclick.js

手机上有些浏览器自带了a标签或者表单的默认点击背景色，比如很丑的颜色，如果想自定义或者干脆取消的话可以使用下面这个属性

-webkit-tap-highlight-color

iPhone上的textarea控件会自带3px的text-indent，如果此时是从上到下一组表单，并且有input有textarea的话，内部的placeholder就会无法对齐。即使是统计初始化padding-left 和 text-indent都为0的话，也无法解决这个小问题。所以只能是用JS手动判断一下当前的userAgent, 设置IOS的text-indent属性值比安卓的小3px

如果当前表单的输入内容是数字的话，一种体验比较好的做法是直接弹出数字键盘。

IOS和安卓都能通用的方法是给input添加以下两个属性

pattern="[0-9]*" 

type="number"