移动端开发遇到的一些兼容性问题
1、解决retina屏幕下一像素border的bug
(1) :after或者:before伪类的缩放实现
/*单条border样式*/
@mixin border-1px ($color, $direction,$borderWidth) {
&:before{
content: '';
position: absolute;
background: $color;
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
// border: $borderWidth solid $color;
@media screen and (-webkit-min-device-pixel-ratio: 2){
width: 200%;
height: 200%;
transform:(scale(0.5));
transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 3){
width: 300%;
height: 300%;
transform:(scale((0.33)));
transform-origin: 0 0;
}
}
}
/*四条border样式*/
@mixin all-border-1px ($color, $radius,$borderWidth) {
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
border: $borderWidth solid $color;
border-radius: $radius;
box-sizing: border-box;
pointer-events: none; /* 防止点击触发 */
width: 100%;
height: 100%;
@media screen and (-webkit-min-device-pixel-ratio: 2){
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
border-radius: $radius*2;
border: $borderWidth solid $color;
transform:(scale(0.5));
transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 3){
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 300%;
height: 300%;
border-radius: $radius*3;
border: $borderWidth solid $color;
transform:(scale(0.33));
transform-origin: 0 0;
}
}
}
优点: 圆角, 其他的边框也可以这样做出来
缺点: 代码量也很大, 占据了伪元素, 容易引起冲突
(2)利用小数实现
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
如果使用less/sass的话只是加了1句 mixin
缺点: 安卓与低版本IOS不适用,未来也许能够兼容.
其他办法暂时没试过,具体请参考https://www.cnblogs.com/lunarorbitx/p/5287309.html
2、设置line-height与height相同,在安卓下无法居中的bug
(1)、可通过设置table方式实现
<div class="container">
<button class="btn"></button>
</div>
<style>
.container{
display: table;
}
.container .btn{
display: table-cell;
}
</style>
(2) 利用缩放scale
#### 3、ios下button带有默认样式
可通过apearance:none重置默认样式。
4、ios使用new Date（）格式化带有‘-’的时间格式，会出现NAN的bug,如new Date('2019-04-14 14:12:10')
解决办法：利用str.replace(/-/g,'/');
5、 内容少时footer固定在底部
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
6、 当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
以下的代码示例：
<template>
<div>
<p @click="addd(obj)">{{obj.d}}</p>
<p @click="adde(obj)"> {{obj.e}}</p>
</div>
</template>
<script>
export default {
data(){
return {
obj:{}
}
},
mounted() {
this.obj = {d: 0};
this.obj.e = 0;
console.log('after--', this.obj);
},
methods: {
addd(item) {
item.d = item.d + 1;
console.log('item--',item);
},
adde(item) {
item.e = item.e + 1;
console.log('item--',item);
}
}
}
</scirpt>
在浏览器运行发现，mounted中输出的:
可以看出d属性是有get 和 set方法的，而新增的e属性是没有的。
点击触发3次addd，点击触发3次adde,页面效果及控制台信息如下
此时触发1次addd,页面效果如下：
由此可以看出，更新新增属性e，是不会更新视图，但是会改变其值，当更新原有属性d时会更新视图，同时将新增的属性e的值也更新到视图里边.
##### 解决办法：
官方定义：
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：
Vue.set(vm.obj, 'e', 0)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
this.$set(this.obj,'e',02)。
有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：
#### 转载来自
作者：爱扎马尾的小狮子
链接：https://www.jianshu.com/p/71b1807b1815
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
#### 7、解决移动端下图片模糊的问题
```
/* 根据dpr显示2x图/3x图 */
@mixin bg-image($url,$type) {
background-image: url($url + "@2x." + $type);
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background-image: url($url + "@3x." + $type);
}
}
```
