touchweb网站常见问题，手机网站注意问题

1、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; }

2、ios 设置input 按钮样式会被默认样式覆盖

解决方式以下：

input, textarea { border: 0; -webkit-appearance: none; }

设置默认样式为none

3、IOS键盘字母输入，默认首字母大写

解决方案，设置以下属性

<input type="text" autocapitalize="off" />

4、select 下拉选择设置右对齐

设置以下：

select option { direction: rtl; }

5、经过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)

6、移动端点击300ms延迟

300ms尚可接受，不过由于300ms产生的问题，咱们必需要解决。300ms致使用户体验并非很好，解决这个问题，咱们通常在移动端用tap事件来取代click事件。

推荐两个js，一个是fastclick，一个是tap.js

关于300ms延迟，具体请看：http://thx.github.io/mobile/300ms-click-delay/

7、移动端点透问题

案例以下：

<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连接上。

解决：

一、 尽可能都使用touch事件来替换click事件。例如用touchend事件(推荐)。

二、用fastclick，https://github.com/ftlabs/fastclick

3 、用preventDefault阻止a标签的click

四、延迟必定的时间(300ms+)来处理事件 （不推荐）

五、以上通常都能解决，实在不行就换成click事件。

下面介绍一下touchend事件，以下：

$("#haorooms").on("touchend", function (event) { event.preventDefault(); });

8、消除 IE10 里面的那个叉号

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

9、关于 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%;

10、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

能够经过正则去掉

this.value = this.value.replace(/\u2006/g, '');

11、移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，因为自动播放网页中的音频或视频，会给用户带来一些困扰或者没必要要的流量消耗，因此苹果系统和安卓系统一般都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才能够播放。

解决方法思路：先经过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操做就没问题了）。

解决代码：

document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });

12、移动端 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','请输入日期'); };

经过上面代码应该就能够解决了！

十3、部分机型存在type为search的input，自带close按钮样式修改方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而一般为了兼容全部浏览器，咱们会本身实现一个，此时去掉原生close按钮的方法为

#Search::-webkit-search-cancel-button{ display: none; }

若是想使用原生close按钮，又想使其符合设计风格，能够对这个伪元素的样式进行修改。

美化的话，请看http://www.haorooms.com/post/qd_ghfx 这篇文章的第五条！

十4、唤起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); };

十5、手机端一像素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); } }

十6、根据设备价值@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");

十7、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; }