移动端css样式兼容

系统管理员 2022-08-31 11:05 253阅读 0赞

**1、1px边框问题**

问题：不同的浏览器对于border：1px像素显示的大小不一样

解决方案：可以利用元素的伪类，来设置1px边框

.parent{
      position: relative;
      height: 100px;
      width:100px;
      background: yellow;
    }
    .parent:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      border: 1px solid gray;
      transform-origin: 0 0;
      transform: scaleY(50%);
    }

**2、input  type='button'在ios和安卓上的默认显示样式不一致**

原因：IOS下有默认的按钮渲染方式（颜色渐变和圆角）

解决方案：给所有的input元素设置如下样式，就可以统一默认样式了

input{
      -webkit-appearance:none; 
    }

**3、input框聚焦时，外层边框高亮,有背景色**

去掉边框高亮的解决方案

input:focus{
      -webkit-appearance: none;
    }
    input{
      outline: none;
    }

**4、ios不兼容js中new Date('2020-01-01')  的写法**

问题：后台返回日期的格式为：date=“2020-01-01”，然后在js中利用该数据得到Date对象，即d = new Date(2020-01-01)，这种格式初始化在安卓手上是正常的，但是ios上不支持这种格式

解决方式：在调用new Date()方法之前，统一处理好入参的格式，即“2020-01-01” .replace(/-/g, '/')，将“2020-01-01”格式转化为“2020/01/01”形式

**5、input. textarea输入框在底部的时候，点击输入框，安卓会出现键盘将输入框挡住了，而ios会将页面整个上移动，但是键盘关闭时候，页面没有自动下移**

解决方案：

focus的时候，调用输入框的scrollIntoView方法

失焦的时候，将页面滑动到顶部

<input ref="input" v-model="val" type="text" @focus="focusBlur('focus')" @blur="focusBlur('blur')" />
    
    
      focusBlur (val) {
          if (val === 'focus') {
            document.body.scrollTop = document.body.scrollHeight;
          } else {
            window.scroll(0, 0)
          }
        }

问题：利用输入框的聚焦和失焦事件来处理会存在这样一种现象，当focus时候，用户输入文字，输入完之后，在输入框聚焦的时候，直接点击提交按钮，会 出现键盘被隐藏，但是提交事件没有触发，需要再次点击按钮，点击事件才会触发。

原因：失焦事件先于点击事件

解决方法：将失焦事件里面的逻辑用setTimeout延后在处理，这样就会触发点击事件，同时也会走失焦的逻辑

**6、input框自动聚焦**

场景：一进到页面，就让输入框自动聚焦

实现方法：给input框设置属性autofocus，如果没有聚焦的话，就通过给元素添加focus方法聚焦

<template>
      <div>
        <input type="text" ref="inputElemet">
      </div>
    </template>
    
    
      mounted () {
        this.$refs['inputElemet'].focus()
      }

问题：如果我们在写路由规则时候，用的是import语法异步引入，用上面的写法，在iOS上会出现第一次进页面的时候，不会聚焦，下次进就会聚焦了

原因：webpack会解析import语法，将其文件生成一个bundle，在真正进入该路由页面的时候，才会加载该文件，而加载文件和渲染页面需要时间，而focus的处理也是在一定时间内处理的，当页面渲染完之后，已经过了处理focus事件的时机，所以就会出现不聚焦的情况

解决方案：将路由中的异步引入，改成同步加载

**7、input输入框拉起的键盘的右下角按钮文案由“换行”变成“搜索”**

问题：像上面的写法，在安卓机上，会由“换行”变成了“搜索”，但是在ios上不生效

解决方法：将input放在form中并且在form中设置action的值；input的type=search

**8、type=search的input框在聚焦后会在输入框的右边有个默认的取消按钮**

产生取消按钮原因：有的浏览器默认给type=search的input框添加了一个伪元素，即取消按钮

去掉默认取消按钮的方法：

input[type=search]::-webkit-search-cancel-button{
      -webkit-appearance: none;
    }

**8、给输入框的placeholder设置字体颜色**

input::-webkit-input-placeholder { 
      color: #CCCCCC;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */ 
      color: #CCCCCC;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #CCCCCC;
    }
    input:-ms-input-placeholder {
      color: #CCCCCC;
    }

**9、margin-bottom在部分ios下失效**

场景：页面底部有一个fixed布局的footer，中间有一个container，本意是当container内容过长的时候，可以拖动页面上滑，使container的内容可以浏览全，不被footer遮住

问题：刚开始给container设置了margin-bottom的值为footer的高度，在安卓手机下可以上拉浏览完container的内容，但是ios下却拖不动页面，导致congtainer底部内容被footer遮住了

解决方案：将container的margin-bottom改成padding-bottom