ios移动端开发的坑

写在前面：人的懒惰真的可以消磨掉好多时间呀～

本文主要记录了在工作中一些关于开发过程中遇到的坑

1.使用vue开发项目时候图片img 在ios端出现不显示的情况

 <img src="https://static.xxx.com/upload/png/0a/cf/0acf4e4e3c35fa2dc631352f3c884c46.png" alt="">
     //样式
     img {
          width: 30px;
          height: 30px; 
      }

在ios端会存在图片加载不出来的情况，具体是为啥呢？？可能和系统加载img 图片的机制有原因吧, 但是使用原生的html开发，采用的gulp去解析，就不会有整个问题，问题出现就要解决

path1:分析了出现图片，加载出来的图片都是通过background 填充到页面的上去，emmmm 背景就会正常的显示

  background-image: url('https://static.xxxx.com/upload/png/d2/79/d279a6d8db305c841b46e9e9cf04a825.png');
  background-size: 750px 2529px;

分析在图片时候，如果是纯图片，无文字，可以通过background的方式去渲染出图片，但是这一种方式也不是全部的适用，因为background加载在html渲染后，所以html渲染完成后，如果网速过慢，img的图片就会显示不出来，导致页面含有背景的部分是空白的，会影响到体验，在一些其他的方面是不适用的，比如图片验证码，

path2:在img标签外部增加一个块级元素

 <div class="red_top">
      <img src="https://static.xxxx.com/upload/png/a7/6f/a76f91d68439dabebae9d0a676456f86.png" alt="">
    </div>
  //  样式区域写法 这样就完美的解决了 原理就在于外面的个块元素可以设置宽高 img会以父元素的宽度为准显示 
  .red_top {
      height: 288px;
      width: 750px;
      img {
        display: block;
        width:100%;
        height:100%; 
        //里面不能加东西呀 比如border其他的属性等
      }
    }

对比疑问：标签img和background 到底有什么区别呢？

主要大区别用途：img元素占位置可被搜索引擎抓取 background-image 则装饰图片，需要手动设置大小才会占位置，跟随所在元素的大小，占据了元素的全部尺寸，比较细致的介绍可以https://blog.csdn.net/sun_dongliang/article/details/79992386 进行查看

2.输入框问题

相信很多的开发者都会遇到过输入框时候各种问题，ios的软键盘下落时候剩余一个小背景，ios软键盘遮住输入框部分。

ios端关闭软键盘，导致页面表单底部有块空余灰色那部分就是背景，在点击表单的时候没反应，可能软键盘拉起的时候一直存在一个蒙层，落下后，导致蒙层没有消失。焦点错误等问题。

path1:让输入框输入焦点后自动滚动到原来位置

function blur(){
    window.setTimeout(function(){
          window.scrollTo(0,document.body.clientHeight);
    }, 500);
};

解决了背景被遮挡的问题，但是出现了一个输入框被部分遮挡 这样每次定义num 就差不多的可以解决了

// 获得焦点，window滚动到0，可以自定义位置
function focus(){
    window.setTimeout(function(mun){
          window.scrollTo(0,num);
    }, 500);
};

至于blur失去焦点事件，一定要记得需要加载最后一个元素输入框上，如果按照正常的流程，加在上面的输入框，失去焦点后就会将键盘收起，影响到用户的使用。

3.穿透事件 ios对于弹层的支持并不友好，滑动弹层的时候，可能弹层的上部分和下部分都会出现一些问题，影响使用，所以更好的进行测试，需要个人将自己的弹层的内部滚动，外边的大元素不进行滚动

.big-wrapper {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0
}

.small-wrapper {
    height: 90%;
    position: absolute;
    width: 80%;
    top: 50%;
    left: -50%;
    transform: translate(-50%, -50%);
    min-height: 90%;
    overflow: scroll;
}

ios移动端开发的坑

猜你喜欢