移动端开发遇到的兼容性问题

最新推荐文章于 2023-03-28 00:34:33 发布

原创最新推荐文章于 2023-03-28 00:34:33 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios bug #es6新特性 #webpack打包

我开始做这个移动端项目，已经有一段时间了，我大致把我遇到的一些问题列举出来。以便加深自己对于技术点的理解，也可以相互学习与交流。

1. button高亮显示问题
问题：
点击置灰状态的button按钮，按钮会闪一下蓝色，这和我原本的样式冲突。在此之前已经清除了outline：none，:active伪类元素等造成的影响，那么为什么还是会有这种现象。
我们在做移动端开发的时候忽略了一个鲜为人知的属性。 -webkit-tap-highlight-color。它的功能是移动端点击时的背景设置。这个属性只适用于ios。当我们点击button时，它会高亮显示。outline：none在移动端这时是不起作用的，想要去除文本框的默认样式使用的是-webkit-appearance，在iOS上加上这个属性才能给按钮和输入框自定义样式，聚焦时取消默认样式是-webkit-tap-highlight-color。
解决方案：
在这个元素上面加上 -webkit-tap-highlight-color:transparent; -webkit-appearance: none; 就可以解决上面这个问题了。
补充：
-webkit-user-select: none; // 禁止页面文字选择，此属性不继承，一般加在body上规定整个body的文字都不会自动调整。但是它会导致input/textarea输入框无法输入，我们写的时候要注意。

   ：*:not(input,textarea) { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
}

-webkit-touch-callout:none; 禁用长按页面时的弹出菜单(iOS下有效) ,取消了放大镜?效果。但是注意的是在企业微信里面这个是不起作用的，长按依旧会有放大镜效果。
2. ios字体问题
问题：
对于手机上的字体来说，我们不能控制。我们主要针对字体修改的就是：衬线与非衬线、顺滑设置。
解决方案：

body{
color: $common-text;
font-family:’Blue Sky Standard Regular’,’Noto Sans CJK SC Regular’,’PingFangSC’,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

3. 多行文本溢出失效
问题：
正常情况下，我们默认最多显示三行文字，代码如下所示。但是我们在审查元素的时候发现-webkit-box-orient: vertical;失效。

overflow : hidden; 
text-overflow: ellipsis; 
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

解决方案:
这是由于webpack打包时，optimize-css-assets-webpack-plugin这个插件造成的。注释掉webpack.prod.conf.js中下面的代码就可以了。

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

除了上面说的解决办法之外，我们也可以采用特殊处理，代码如下所示：

/*! autoprefixer: off */
 -webkit-box-orient: vertical;
/* autoprefixer: on */

4. ES6新特性：symbol类型造成的问题

问题
在项目中，我需要删除数组中的某个元素，代码如下。

this.state.tag.splice(this.state.tag.findIndex(tag => tag.id ===
item.id),1);

我检查了好几遍，没有发现代码有什么问题，但是控制台在报错，我发现这是由于tag数组的每一项是symbol类型的对象，splice不能删除，会报错。
sybmol类型官方解释是说：

The Symbol constructor is the %Symbol% intrinsic object and the
initial value of the Symbol property of the global object. When Symbol
is called as a function, it returns a new Symbol value. The Symbol
constructor is not intended to be used with the new operator or to be
subclassed. It may be used as the value of an extends clause of a
class definition but a supercall to the Symbol constructor will cause
an exception.

我就不解释这是什么意思了（英语不好，多多见谅）。
解决方案
我用的办法比较笨拙，为了使用splice方法，我是又遍历重新拿到tag数组，然后赋给tag。如果大家有好的方法，可以交流一下。Thank you！