关于vue.js:前端遇到的那些技术难点

4次阅读

共计 2865 个字符，预计需要花费 8 分钟才能阅读完成。

挪动端兼容
css 篇
挪动端的 1px
问题形容：1px 的边框。在高清屏下，挪动端的 1px 会很粗。

产生起因：首先先要理解一个概念：DPR(devicePixelRatio) 设施像素比，它是默认缩放为 100% 的状况下，设施像素和 CSS 逻辑像素的比值。目前支流的屏幕 DPR=2 或者 3。CSS 中设置的 px 是逻辑像素, 这就造成 1px 变成物理像素的 2px 或者 3px，比方 2 倍屏，设施的物理像素要实现 1 像素，所以 CSS 逻辑像素只能是 0.5px。

上面介绍最罕用的办法

通过 CSS :before 选择器或 CSS :after 选择器设置 height:1px，同时缩放 0.5 倍实现。

/ 底边框 /
.b-border {
position: relative;
}
.b-border:before {
content: ”;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #d9d9d9;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

/ 四条边 /
.setBorderAll {
position: relative;
&:after {

content: ' ';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: left top;
box-sizing: border-box;
border: 1px solid #e5e5e5;
border-radius: 4px;

}
}
复制代码
CSS 动画页面闪白, 动画卡顿
问题形容：CSS 动画页面闪白, 动画卡顿

解决办法: 1. 尽可能地应用合成属性 transform 和 opacity 来设计 CSS3 动画，不应用 position 的 left 和 top 来定位 2. 开启硬件加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
复制代码
屏蔽用户抉择
禁止用户抉择页面中的文字或者图片

div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
复制代码
革除输入框内暗影
问题形容：在 iOS 上，输入框默认有外部暗影解决形式：

input {
-webkit-appearance: none;
}
复制代码
禁止保留或拷贝图像
img {
-webkit-touch-callout: none;
}
复制代码
输入框默认字体色彩设置
设置 input 外面 placeholder 字体的色彩

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #c7c7c7;
}
复制代码
用户设置字号放大或者放大导致页面布局谬误
设置字体禁止缩放

body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
复制代码
android 零碎中元素被点击时产生边框
局部 android 零碎点击一个链接，会呈现一个边框或者半透明灰色遮罩, 不同生产商定义进去额成果不一样。去除代码如下

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
复制代码
iOS 滑动不晦涩
ios 手机高低滑动页面会产生卡顿，手指来到页面，页面立刻进行静止。整体体现就是滑动不晦涩，没有滑动惯性。iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决形式 1. 在滚动容器上减少滚动 touch 办法
.wrapper {
-webkit-overflow-scrolling: touch;
}
复制代码
2. 设置 overflow 设置内部 overflow 为 hidden, 设置内容元素 overflow 为 auto。外部元素超出 body 即产生滚动，超出的局部 body 暗藏。

body {
overflow-y: hidden;
}
.wrapper {
overflow-y: auto;
}
复制代码
html 篇
罕用的 meta 属性设置
meta 对于挪动端的一些非凡属性，可依据须要自行设置