移动端 常见问题整理

标签：

使用iScroll时，input等不能输入内容的解决方法

<script>
function allowFormsInIscroll(){
 [].slice.call(document.querySelectorAll(‘input, select, button‘)).forEach(function(el){
 el.addEventListener((‘ontouchstart‘ in window)?‘touchstart‘:‘mousedown‘, function(e){
 e.stopPropagation();
 })
 })
 }
 document.addEventListener(‘DOMContentLoaded‘, allowFormsInIscroll, false);
 </script>

iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了。

当用iScroll时候，不能使用:focus{outline:0}伪类，否则滑动会卡

当 ipad上网页宽度超过980是，页面被截断  content="width=980 默认980；需要重新设置；

<meta name="viewport" content="width=1200, target-densitydpi=high-dpi, user-scalable=no" />

移动端浏览器中经常会出现高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它

document.documentElement.style.height = window.innerHeight + ‘px‘;

叠加区高亮

input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}

button在ios上的默认样式 屏蔽输入框怪异的内阴影。

-webkit-appearance: none;border-radius: 0

IOS 等Retina屏幕 图片有点朦胧胧的感觉 根据“pixel rotio” 设置图片大小；

-webkit-background-size可以做高清图标，不过一些低版本的android只能识别background-size

iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的 高度 就会变为 减去键盘 的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来。我是当focus时就把它设:absolute ;

在部分android 机型中的输入框可能多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-webkit-text-security: disc; 隐藏输入密码从而解决。

android 4.0版本以下CSS :active伪状态效果无法兼容，我们给该元素的touch系列的事件（touchstart/touchend/touchmove）绑定一个空匿名方法:

var element=document.getElementsById(”btnShare”);
element.addEventListener(‘touchstart’,function(){},false)

移动端还是PC短 如果使用fixed 元素；元素不停渲染问题；这个可以用谷歌浏览器开发者—esc -esc-rendering-show paint rectangles 查看

-webkit-transform：translateZ(0);

translateZ 还能修复部分 > 字符 问题；

参考网址

http://www.ghugo.com/chrome-rendering-tools-1/   这个非常好

http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

http://www.w3cfuns.com/article-1248-1.html

移动端 常见问题整理

标签：

原文地址：http://www.cnblogs.com/surfaces/p/4502871.html