移动端css样式兼容

Posted 赏花赏景赏时光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端css样式兼容相关的知识,希望对你有一定的参考价值。

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)
      }
    }

6、input框自动聚焦

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

实现方法:给input框设置属性autofocus就可以实现聚焦功能了

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

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

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

7、margin-bottom在部分ios下失效

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

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

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

以上是关于移动端css样式兼容的主要内容,如果未能解决你的问题,请参考以下文章

移动端css样式兼容

MarkdownPad2代码高亮插件兼容移动端样式

移动端横屏和竖屏兼容css要写两套代码吗

解决移动端报错:Unable to preventDefault inside passive event listener due to target being treated as……(代码片段

移动端布局

classlist.add在移动端存在兼容性吗