前端遇到的那些技术难点
移动端兼容
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倍实现。
CSS动画页⾯闪⽩，动画卡顿
问题描述：CSS动画页⾯闪⽩，动画卡顿解决⽅法: 1.尽可能地使⽤合成属性transform和opacity来设计CSS3动画，不使⽤position的left和top来定位 2.开启硬件加速
/* 底边框 */
.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;
}
}
复制代码
屏蔽⽤户选择
禁⽌⽤户选择页⾯中的⽂字或者图⽚
清除输⼊框内阴影
问题描述：在 iOS 上，输⼊框默认有内部阴影 解决⽅式：
禁⽌保存或拷贝图像
输⼊框默认字体颜⾊设置
设置 input ⾥⾯ placeholder 字体的颜⾊
⽤户设置字号放⼤或者缩⼩导致页⾯布局错误设置字体禁⽌缩放
-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;
}
复制代码
input {
-webkit-appearance: none;
}
复制代码
img {
-webkit-touch-callout: none;
}
复制代码
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系统点击⼀个链接，会出现⼀个边框或者半透明灰⾊遮罩, 不同⽣产商定义出来额效果不⼀样。去除代码如下
iOS 滑动不流畅
ios ⼿机上下滑动页⾯会产⽣卡顿，⼿指离开页⾯，页⾯⽴即停⽌运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。
解决⽅式 1.在滚动容器上增加滚动 touch ⽅法
2.设置 overflow 设置外部 overflow 为 hidden，设置内容元素 overflow 为 auto。内部元素超出 body 即产⽣滚动，超出的部分 body 隐藏。
html 篇
常⽤的meta属性设置
meta对于移动端的⼀些特殊属性，可根据需要⾃⾏设置
a标签唤起原⽣应⽤
同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：
js篇
iPhone7⽤for…in 遍历数组失效
问题描述：最初学习使⽤js时，觉得for…in遍历⽐for循环简洁，后期在⽤户反馈后发现iPhone7不⽀持⽤for…in遍历数组解决⽅式： 改为for循环遍历a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only; }
复制代码.wrapper {
-webkit-overflow-scrolling: touch;}
复制代码
body {  overflow-y: hidden;
}
.wrapper {  overflow-y: auto;
}
复制代码<meta content="telephone=no" name="format-detection" />  //
禁⽌ iOS 识别长串数字为电话
<meta name="screen-orientation" content="portrait">  //Android 禁⽌屏幕旋转
<meta content="email=no" name="format-detection" /> //不让 Android
⼿机识别邮箱<meta name="format-detection" content="telephone=no" /> //禁⽌电话号码识别
<meta name="full-screen" content="yes"> //全屏显⽰
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no" /> //H5页⾯窗⼝⾃动调整到设备宽度，并禁⽌⽤户缩放页⾯
<meta name="apple-mobile-web-app-capable" content="yes" />  //当⽹站添加到主屏幕快速启动⽅式，可隐藏地址栏，仅针对ios 的safari  ios7.0版本以后，sa
将⽹站添加到主屏幕快速启动⽅式，仅针对ios 的safari 顶端状态条的样式
复制代码<a mailto:dooyoe@gmail">dooyoe@gmail</a> //唤起邮箱
<a href="tel:123456">123456</a> //唤起电话
复制代码
移动端点击事件300 ms延迟问题
问题描述：移动端web⽹页是有300ms延迟的，往往会造成按钮点击延迟甚⾄是点击失效。
解决⽅式：
fastclick可以解决在⼿机上点击事件的300ms延迟
zepto.js的touch模块，tap事件也是为了解决在click的延迟问题
audio 和 video 在 ios 和 andriod 中⾃动播放
出于优化⽤户体验，苹果系统和安卓系统通常都会禁⽌⾃动播放和禁⽌页⾯加载时使⽤ JS 触发播放，必须由⽤户主动点击页⾯才可以触发播放。通过给页⾯根元素加touchstart的监听事件实现触发播放
iOS 上拉边界下拉出现空⽩
问题描述：⼿指按住屏幕下拉，屏幕顶部会多出⼀块⽩⾊区域。⼿指按住屏幕上拉，底部多出⼀块⽩⾊区域。
产⽣原因：在 iOS 中，⼿指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器⾃然会被拖动，剩下的部分会成空⽩。
解决⽅式：
ios ⽇期转换 NAN 的问题
将⽇期字符串的格式符号替换成’/’
‘yyyy-MM-dd’.replace(/-/g, ‘/’)
复制代码
软键盘问题
iOS 系统中⽂输⼊法输⼊英⽂时，字母之间可能会出现⼀个六分之⼀空格
解决⽅式：可以通过正则去掉
IOS 键盘弹起挡住原来的视图
解决⽅式：
可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）⽅法⽤来将不在浏览器窗⼝的可见区域内的元素滚动到浏览器窗⼝的可见区域。 如果该元素已经在浏览器窗⼝的可见区域内，则不会发⽣滚动。
true，则元素将在其所在滚动区的可视区域中居中对齐。
false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。$('html').one('touchstart', function() {
audio.play()
})复制代码
document.body.addEventListener(  'touchmove',
function(e) {    if (e._isScroller) return
// 阻⽌默认事件
e.preventDefault()  },
{
passive: false
}
)
复制代码
this.value = place(/\u2006/g, '');
复制代码
onkeyUp 和 onKeydown 兼容性问题
IOS 中 input 键盘事件 keyup、keydown、等⽀持不是很好, ⽤ input 监听键盘 keyup 事件，在安卓⼿机浏览器中没有问题，但是在 ios ⼿机浏览器中⽤输⼊法输⼊之后，并未⽴刻相应 keyup 事件
IOS12 输⼊框难以点击获取焦点，弹不出软键盘
定位到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改
IOS 键盘收起时页⾯没⽤回落，底部会留⽩通过监听键盘回落时间滚动到原来的位置
window.addEventListener('resize', function() {  if (
document.activeElement.tagName === 'INPUT' ||    document.activeElement.tagName === 'TEXTAREA'
) {
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})
复制代码FastClick.prototype.focus = function(targetElement) {
var length
if (    deviceIsIOS &&
targetElement.setSelectionRange &&
) {
length = targetElement.value.length
targetElement.setSelectionRange(length, length)
targetElement.focus()
} else {
targetElement.focus()
}
}复制代码
window.addEventListener('focusout', function() {
window.scrollTo(0, 0)
})
//input 输⼊框弹起软键盘的解决⽅案。
var bfscrolltop = document.body.scrollTop
$('input')
.focus(function() {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
input标签placeholder属性})
.blur(function() {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。