前端遇到的那些技术难点

番茄西红柿发布于2021-11-22 15:29 / 3265人阅读

摘要：目前主流的屏幕或者。产生原因在中，手指按住屏幕上下拖动，会触发事件。或者可以加入我的开发交流群相互学习，我们会有专业的技术答疑解惑如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点不胜感激

移动端兼容

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对于移动端的一些特殊属性，可根据需要自行设置

</>复制代码 
  //禁止 iOS 识别长串数字为电话
  //Android 禁止屏幕旋转
 //不让 Android 手机识别邮箱
 //禁止电话号码识别
 //全屏显示
 //H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
  //当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari  ios7.0版本以后，safari上已看不到效果 
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式            
复制代码

a标签唤起原生应用

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

</>复制代码 
dooyoe@gmail.com //唤起邮箱

123456 //唤起电话
复制代码

js篇

iPhone7用for...in 遍历数组失效

问题描述：最初学习使用js时，觉得for...in遍历比for循环简洁，后期在用户反馈后发现iPhone7不支持用for...in遍历数组

解决方式：改为for循环遍历

移动端点击事件300 ms延迟问题

问题描述：移动端web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

解决方式：

fastclick可以解决在手机上点击事件的300ms延迟
zepto.js的touch模块，tap事件也是为了解决在click的延迟问题

audio 和 video 在 ios 和 andriod 中自动播放

出于优化用户体验，苹果系统和安卓系统通常都会禁止自动播放和禁止页面加载时使用 JS 触发播放，必须由用户主动点击页面才可以触发播放。通过给页面根元素加touchstart的监听事件实现触发播放

</>复制代码 
$(html).one(touchstart, function() {
  audio.play()
})
复制代码

iOS 上拉边界下拉出现空白

问题描述：手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

产生原因：在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决方式：

</>复制代码 
document.body.addEventListener(
  touchmove,
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)
复制代码

ios 日期转换 NAN 的问题

将日期字符串的格式符号替换成/

</>复制代码 
yyyy-MM-dd.replace(/-/g, /)
复制代码

软键盘问题

iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

解决方式：可以通过正则去掉

</>复制代码 
 this.value = this.value.replace(//u2006/g, );
复制代码

IOS 键盘弹起挡住原来的视图

解决方式：

可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
true，则元素将在其所在滚动区的可视区域中居中对齐。
false，则元素将与其所在滚动区的可视区域最近的边缘对齐。根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

</>复制代码 
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)
  }
})
复制代码

onkeyUp 和 onKeydown 兼容性问题

IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件

IOS12 输入框难以点击获取焦点，弹不出软键盘

定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改

</>复制代码 
FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf(date) !== 0 &&
    targetElement.type !== time &&
    targetElement.type !== month
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}
复制代码

IOS 键盘收起时页面没用回落，底部会留白

通过监听键盘回落时间滚动到原来的位置

</>复制代码 
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);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })

复制代码

IOS 下 fixed 失效

问题描述：软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll

</>复制代码 

  
    

  
  


复制代码

</>复制代码 
.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; 
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

最后

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激！

GPU云服务器云服务器 php开发遇到的难点前端技术主要有那些最新的前端技术前端需要的技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/124355.html

SegmentFault 社区访谈 | Linxz：只会写 CSS 不会写 JS 的“伪”前端

摘要：所以，现在的我是一个只会不会写的伪前端。技术升华环节如何理解你的微博简介一个只会写不会写的伪前端工程师你觉得和学习起来各有什么难点呢微博我好久没去碰了，其实现在应该是写一个连都不会写，更不会写的伪前端工程师。 showImg(https://segmentfault.com/img/bVT0Y4?w=900&h=385); 上周没和大家见面，是去邀请大佬来访谈了(///▽///)社区访...

libxd 2019-08-29 13:17 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
那些年，前端学习之路的疑难杂症（四）：面试中遇到的3个问题概览

摘要：闭包能用来实现私有化和创建工厂函数等作用。关于闭包的常见面试题是这样的写一个函数，循环一个整数数组，延迟秒打印这个数组中每个元素的索引。文章来源：http://mp.weixin.qq.com/s/vs0... 前言在公众号上看到了这篇文章，觉得很有用，有助于理解JS学习中的一些重点难点。决定把它整理下发布出来。该文章主要介绍了JS中的三个问题。在以后的几篇文章里，我会详细介绍这三...

gecko23 2019-08-20 15:08 评论0 收藏0
新鲜出炉的8月前端面试题

摘要：前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题主要考察前端技基础是否扎实，是否能够将前端知识体系串联。前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。基础题题目的答...

qingshanli1988 2019-08-23 10:47 评论0 收藏0
云计算发展面临哪些难点？

摘要：在执行云计算策略使用所需的新工具更改管理和选择云计算部署模型方面，确定哪些工作负载应转移到云端通常被列为首要挑战。在过去几年中，企业对云计算的关注大多是简单的过渡。但是，随着IT组织在运行一些独立的应用程序和工作负载之后，开始发现采用云计算只是其职业生涯冒险的第一步。IT自动化平台提供商NetEnrich公司对拥有500名或更多员工的企业的100名IT决策者进行了调查，85％的受访者表示采用...

GHOST_349178 2019-04-29 15:46 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师

我要关注我要私信

TA的文章

tensor

阅读 937·2023-04-25 19:43
Windows 下安装 XGBoost

阅读 4231·2021-11-30 14:52
Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

阅读 4020·2021-11-30 14:52
VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

阅读 4127·2021-11-29 11:00
百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

阅读 4019·2021-11-29 11:00
Linux系统和宝塔面板如何启用禁ping功能?

阅读 4143·2021-11-29 11:00
301重定向怎么做?301重定向设置方法有几种

阅读 3868·2021-11-29 11:00
wordpress网站重定向次数过多的解决方法

阅读 6746·2021-11-29 11:00

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

前端遇到的那些技术难点

移动端兼容

css篇

移动端的 1px

</>复制代码

CSS动画页面闪白,动画卡顿

</>复制代码

屏蔽用户选择

</>复制代码

清除输入框内阴影

</>复制代码

禁止保存或拷贝图像

</>复制代码

输入框默认字体颜色设置

</>复制代码

用户设置字号放大或者缩小导致页面布局错误

</>复制代码

android系统中元素被点击时产生边框

</>复制代码

iOS 滑动不流畅

</>复制代码

</>复制代码

html 篇

常用的meta属性设置

</>复制代码

a标签唤起原生应用

</>复制代码

js篇

iPhone7用for...in 遍历数组失效

移动端点击事件300 ms延迟问题

audio 和 video 在 ios 和 andriod 中自动播放

</>复制代码

iOS 上拉边界下拉出现空白

</>复制代码

ios 日期转换 NAN 的问题

</>复制代码

软键盘问题

iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

</>复制代码

IOS 键盘弹起挡住原来的视图

</>复制代码

onkeyUp 和 onKeydown 兼容性问题

IOS12 输入框难以点击获取焦点，弹不出软键盘

</>复制代码

IOS 键盘收起时页面没用回落，底部会留白

</>复制代码

IOS 下 fixed 失效

</>复制代码

</>复制代码

最后

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动