哪里建个人网站好,建设银行网站查余额查询,企业网站托管电话,wordpress简洁淘宝客免费主题一、安卓设备的select options的坑#xff0c;尽量使用各浏览器内核都支持的api在添加 OPTION 元素时如果需要向指定索引前插入 OPTION#xff0c;可以使用 options.add(option, index)#xff1b;如果需要向 SELECT 尾部添加 OPTION#xff0c;可以使用 options.add(optio…一、安卓设备的select options的坑尽量使用各浏览器内核都支持的api在添加 OPTION 元素时如果需要向指定索引前插入 OPTION可以使用 options.add(option, index)如果需要向 SELECT 尾部添加 OPTION可以使用 options.add(option)如果需要向指定索引处添加(或更改) OPTION可以使用 options[index] option。在删除 OPTION 元素时如果想删除指定索引处的 OPTION 元素可以使用 select.remove(index) 或 options[index] null如果想删除某个指定的 OPTION 元素可以使用 select.remove(option)如果想删除 SELECT 中所有 OPTION可以使用 select.length 0 或 options.length 0。二、移动端click事件300ms延迟click事件在移动端会经过300ms的延迟后才触发。原因是移动浏览器提供一个特殊的功能双击(double tap)放大用户碰触页面之后需要等待一段时间来判断是不是双击(double tap)动作而不是立即响应单击(click)等待的这段时间大约是300ms。那么怎么消除这个300ms延迟呢1.使用fastclick插件会消除所有click事件的延迟不推荐使用插件来解决这个问题2.不用click事件用移动设备提供的原生touch事件或某些移动端手势库提供的tap事件。移动端touch事件提供了 touchstart 、 touchmove 、 touchend等对于简单的页面可以把 touchstart 或者 touchend 当作tap来用这样可以解决300ms延迟问题但并不完美比如手指接触目标元素按住不放慢慢移出响应区域依然会触发 touchstart事件对应的事件处理器(本不应该触发)touchend也有类似的问题所以如果想模拟原生App的点击事件需要自己封装一套tap事件或者使用手势库的tap事件tap事件原理也非常简单是由touchstart和touchend组合而成首先要判断touchend和touchstart的偏移距离然后阻止掉touchend事件300ms之后触发的click事件并且始终以touchend事件作为触发的必要条件下面是个demofunctiontap(node,callback,scope) {node.addEventListener(TOUCHSTART,function(e) {x e.touches[0].pageX;y e.touches[0].pageY;});node.addEventListener(TOUCHEND,function(e) {e.stopPropagation();e.preventDefault();var curx e.changedTouches[0].pageX;var cury e.changedTouches[0].pageY;if (Math.abs(curx - x) 6 Math.abs(cury - y) 6) {callback.apply(scope, arguments);}});}下面是zepto的tap事件实现源码if (deltaX 30 deltaY 30) {tapTimeout setTimeout(function() {var event $.Event(tap)event.cancelTouchcancelAlltouch.el.trigger(event)if(touch.isDoubleTap) {if (touch.el) touch.el.trigger(doubleTap)touch{}}else{touchTimeout setTimeout(function() {touchTimeout nullif (touch.el) touch.el.trigger(singleTap)touch{}},250)}},0);}三、点击穿透如果某个返回按钮的位置恰好在要返回的这个页面的带有href属性的a标签的范围内在点击返回按钮后页面快速切换到有a标签的页面300ms后触发了click事件从而触发了a标签的意外跳转这个就是典型的点击穿透问题。罪魁祸首其实就是a标签跳转默认是click事件触发而移动端的touch事件触发之后依然会在300ms后触发click事件。解决办法其实在上面一条已经提到了。1.就是消费掉touch事件完成后的click事件。2.不要混用touch和click事件。显然不可能都绑定click事件因为要解决300ms延迟问题(除了fastclick)那么只能都绑定touch事件这样click事件永远不会被触发。综上二条最好的办法就是自己封装一个tap事件并且自己阻止掉300ms后的click事件完美解决。注意zepto并没有阻止click事件所以使用zepto的tap事件依然会导致点击穿透问题你需要手动添加 e.preventDefault() 来阻止click事件。四、移动端整体布局移动端的整体布局一般来说可以分为上中下三个部分分别为 header、main、footer其中header、footer 是固定高度分别固定在页面顶部和页面底部而 main 是页面展示主体内容的部分并且可以滚动。要实现这种布局有两种办法1.最容易想到的就是header和footer为fixedbody最小高度为一屏超出则滚动。这种布局有个优点在ios的safari上页面的地址栏会随着 body 的滚动隐藏起来缺点就是fixed在有input的页面会有各种兼容性问题(经测试在固定到主屏幕并且去掉导航栏的情况下fixed有bug移动端的各种浏览器中是没有问题的)2.采取内滑的策略。具体的实现方式可能略有不同但思路都是在元素内部滚动而不是body。比如可以设置header和footer为absolutemain也为absolute并且overflow-y为auto或者用弹性布局的方式。在移动端元素内滑动会有不流畅的问题建议加上-webkit-overflow-scrolling: touch这样就能愉快的滚动了。这种布局的优点就是避免了使用fixed缺点就是移动端浏览器中input框的光标闪烁问题(在滚动页面的时候光标会错位不跟随input框闪烁原因是加了-webkit-overflow-scrolling: touch导致滑动速度太快来不及重绘解决方法是在你滑动页面的时候直接让input失去焦点隐藏光标)五、input 的 compositionstart 和 compositionend 事件在input中输入中文的时候在没有选定文字前输入的每一个拼音字母也会触发input事件这显然不是我们想要的。我们需要 compositionstart 和compositionend 事件来处理这个问题。compositionstart会在用户开始进行非直接输入的时候触发compositionend会在点选候选词或者点击「选定」按钮之后触发。我们可以在compositionstart的时候将input事件上锁让其不执行在compositionend的时候再解锁注意compositionend 事件是在 input 事件后触发的。六、移动端 1px border 实现由于设备高分辨率屏的原因逻辑像素的 1px 的 border 在移动设备上会用两个或三个物理像素来表示所以看起来会感觉很粗。解决方案有很多但兼容性最好的方案是用伪元素的 box-shadow 或 border 实现 border然后用 transform: scale(.5) 缩小到原来的一半。具体如下.block{width:100px;height:100px;margin:10px;position:relative;/*border: 1px solid red;*/}.block:before{content:;position:absolute;transform-origin:0 0;top:0;left:0;width:200%;height:200%;border:1px solid red;transform:scale(.5);}七、一些小坑1.format-detection默认情况下设备会自动识别任何可能是电话号码的字符串。设置telephoneno可以禁用这项功能。2.禁止复制、选中文本user-select:none;3.长时间按住页面出现闪退或禁止 iOS 弹出各种操作窗口-webkit-touch-callout:none;4.ios或安卓设备input等元素的特殊样式-webkit-appearance:none;5.ios或android下触摸元素时出现半透明灰色遮罩-webkit-tap-highlight-color:rgba(255,255,255,0)6.移动端伪类 :active 不起作用document.addEventListener(touchstart,function(){},false);7.启用硬件加速使动画更流畅transform:translate3d(0,0,0);8.旋转屏幕时字体大小调整的问题-webkit-text-size-adjust:100%;9.transition闪屏设置子元素以3D的方式呈现-webkit-transform-style:preserve-3d;设置进行转换的元素的背面在面对用户时是否可见-webkit-backface-visibility:hidden;10.CSS3 rotateY transition 在safari上有bug当前转动的元素在其上有元素覆盖它时或在其下有元素被它覆盖时会出现如下bug建议设置transform:translateZ(-1000px);11.移动端选择相片一定要显示的声明accept接收的类型
