移动端开发常遇问题解答

1、在手机端如果1px线条仍然显示过粗,可以使用css新属性border-image边框图像来解决

     例:border-image: url(../img/line-img1.png) 2 0 round;

     关于border-image熟悉的介绍:http://www.w3cplus.com/content/css3-border-image

 

2、在部分安卓机上使用border-image后,发现内容区域设置 :active 后不起作用。

     原因:border-image 后面默认加了fill关键字

     解决办法:使用的边框图片,图片中间区域背景一定要是透明的。

 

3、部分安卓机对键盘事件不兼容,如果是对输入框内容监听变化可用input事件

 

4、部分iphone上,页面内如果有position:fixed固定内容,第一次滑动页面时,固定内容会随页面滑动,松开手后,内容回到原位。bug原因和覆盖范围未知。

      解决办法:用js控制固定内容第一次滑动时的的top值

 

5、防止按钮点击时 背景闪烁

      html{

          -webkit-tap-highlight-color: transparent;

      }

 

6、设置input的placeholder内容样式的方法

    input::-webkit-input-placeholder{
        color:#999;
        font-size: 14px;
    }

7、兼容iOS伪类 :active   需要给 document 绑定 touchstart 或 touchend 事件
    document.addEventListener('touchstart',function(){},false);

 

8、消除 IE10 里 input输入框右侧的叉号

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

9、 禁止用户选中文字

     -webkit-user-select:none

 

10、腾讯移动端解决方案

        https://github.com/AlloyTeam/Mars

 

11、移动设备尺寸大全

      http://screensiz.es/phone​

 

12、各种参考手册

         css: http://css.doyoe.com/

         javascript:  https://msdn.microsoft.com/zh-CN/library/yek4tbz0.aspx

         zepto:  http://www.css88.com/doc/zeptojs_api/

         jquery: http://tool.oschina.net/apidocs/apidoc?api=jquery

 

13、input输入框输入内容后,点击自定义清空内容的按钮,键盘收起的问题
       解决办法:按钮用input标签,改变样式为按钮样子,点击删除后,设置原输入框focus();

14、input 安卓样式 输入框靠右问题

$("input").each(function(){
var that = $(this);
if(that.val() == "" && that.attr("placeholder") != ""){
that.val(that.attr("placeholder"));

var val = null;
that.focus(function(){
val = $(this).val();
if(val == that.attr("placeholder")){
$(this).val("");
}
});

that.blur(function(){
if($(this).val() == ""){
$(this).val(val);
}
});
}
});

$("textarea").each(function(){
var that = $(this);
if(that.val() == "" && that.attr("placeholder") != ""){
that.val(that.attr("placeholder"));

var val = null;
that.focus(function(){
val = $(this).val();
if(val == that.attr("placeholder")){
$(this).val("");
}
});

that.blur(function(){
if($(this).val() == ""){
$(this).val(val);
}
});
}
});

 

posted @ 2015-09-11 17:46  野紫  阅读(206)  评论(0编辑  收藏  举报