一、h5网站input 设置为type=number的问题
h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。
问题一解决，我目前用的是js。如下
<input type="number" oninput="checkTextLength(this ,10)">
function checkTextLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}或者
<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />或者
简单方法，直接把number改成tel 然后设置maxlength
问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：
<input type="number" step="0.01" />关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。
假如step和min一起使用，那么数值必须在min和max之间。
看下面的例子：
<input type="number" step="3.1" min="1" />输入框可以输入哪些数字？
首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。
问题三，去除input默认样式
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}二、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}设置默认样式为none
三、IOS键盘字母输入，默认首字母大写
解决方案，设置如下属性
<input type="text" autocapitalize="off" />四、select 下拉选择设置右对齐
设置如下：
select option {
direction: rtl;
}五、通过transform进行skew变形，rotate旋转会造成出现锯齿现象
可以设置如下：
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)六、移动端点击300ms延迟
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。
关于300ms延迟，具体请看：http://thx.github.io/mobile/300ms-click-delay/
七、移动端点透问题
案例如下：
<div id="haorooms">点头事件测试</div>
<a href="www.haorooms.com">www.haorooms.com</a>div是绝对定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接，我们给div绑定tap事件：
$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。
原因：
touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。
解决：
1、 尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
2、用fastclick，https://github.com/ftlabs/fastclick
3 、用preventDefault阻止a标签的click
4、延迟一定的时间(300ms+)来处理事件 （不推荐）
5、以上一般都能解决，实在不行就换成click事件。
下面介绍一下touchend事件，如下：
$("#haorooms").on("touchend", function (event) {
event.preventDefault();
});八、消除 IE10 里面的那个叉号
input:-ms-clear{display:none;}九、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;十、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');十一、移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
解决代码：
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});十二、移动端 HTML5 input date 不支持 placeholder 问题
这个我感觉没有什么好的解决方案，用如下方法
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">有的浏览器可能要点击两遍！
方法二
input[type="date"]:before{
content: attr(placeholder);
color:#ddd;
}js部分
var o = document.getElementById('date');
o.onfocus = function(){
this.removeAttribute('placeholder');
};
o.onblur = function(){
if(this.value == '') this.setAttribute('placeholder','请输入日期');
};通过上面代码应该就可以解决了！
十三、部分机型存在type为search的input，自带close按钮样式修改方法
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为
#Search::-webkit-search-cancel-button{
display: none;
}如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。
美化的话，请看http://www.haorooms.com/post/qd_ghfx 这篇文章的第五条！
十四、唤起select的option展开
zepto方式:
$(sltElement).trrgger("mousedown");原生js方式:
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};十五、手机端一像素border设置
假如border所在div的class名字是haorooms
.haorooms:after,
.haorooms:after {
border-top: 1px solid #bfbfbf;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
/* 1.5倍 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 150/100),
only screen and (min-device-pixel-ratio: 1.5) {
.haorooms:after,
.haorooms:after {
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
/* Retina 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.haorooms:after,
.haorooms:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 三倍屏 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
.haorooms:after,
.haorooms:after {
-webkit-transform: scaleY(0.33333334);
transform: scaleY(0.33333334);
}
}十六、根据设备价值@2x或者@1x或者@3x的图片
sass代码
@mixin bgimage($url) {
background-image: url($url + "@1x.png");
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min-device-pixel-ratio: 2.0) {
background-image: url($url + "@2x.png");
}
}引入如下：
@include bgimage("./img/site/piowrap");十七、Sass中@function中px转rem
$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义
html {
font-size: $browser-default-font-size;
}
@function pxTorem($px){//$px为需要转换的字号
@return $px / $browser-default-font-size * 1rem;
}