zoukankan      html  css  js  c++  java
  • 移动端开发的兼容性问题

    1、ios下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题,使用opacity=1来解决

    2、一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发,css增加cursor:pointer就搞定了

    3、1px边框问题使用
    xx:before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ccc;
    200%;
    height: 200%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    }

    4、input为fixed定位在ios下的bug问题:input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置。可以使用内容列表框也是fixed定位,这样不会出现fixed错位的问题

    5、移动端字体小于12px使用四周边框或者背景色块,安卓文字偏上bug问题,可以使用整体放大1倍(width、height、font-size等等)再使用transiform缩放,而且字体尽量不要是奇数,使用canvas在移动端也会模糊也需要这样设置

    6、在移动端图片上传图片 使用accept="image/*" multiple,兼容低端机的问题

    7、在h5嵌入app中,ios如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感觉self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”

    8、click 300ms 延时响应 使用 Fastclick
    window.addEventListener( "load", function() {
    FastClick.attach( document.body );
    }, false );

    9、input 有placeholder情况下不要设置行高,否则会placeholder文字会偏上

    10、移动端图片压缩预览上传的问题,可以参考我的一篇文章https://segmentfault.com/a/11...

    11、移动端适配可以使用lib-flexible https://github.com/amfe/lib-f...,使用rem来布局移动端有一个问题就是px的小数点的问题,不同的手机对于小数点处理方式不一样,有些是四舍五入,有些直接舍去掉,因此在自动生成雪碧图时候图标四周适当留2px的空间,防止图标被裁剪掉

  • 相关阅读:
    企业面试题库1
    就业模拟试题_Net
    就业模拟试题_Java
    oracle创建用户
    Activity基础类
    Activity容器控件
    面试题_Java
    Activity功能控件
    获取工作流活动的返回值
    企业面试题库_数据库部分
  • 原文地址:https://www.cnblogs.com/junjingyi/p/9224004.html
Copyright © 2011-2022 走看看