移动常见疑难问题

KevinYan 发布于2019-08-26 10:33 / 1003人阅读

摘要：是在系列事件发生后大约才触发的，混用和就会导致点透问题。获取视图原始高度方案二能较好地处理滚动的问题。禁止蒙层底下页面跟随滚动原因弹窗是常见的交互方式，而蒙层是弹窗必不可少的元素。

平时的开发过程中，经常会遇到一些疑难杂症，在这里记录一下常用的解决方案。

UI小姐姐要求的0.5px线

原因：不同手机的兼容不一样，尤其安卓
IOS的Safari表现是比较好的，safari是可以支持浮点型的属性的。因此在IOS的系统中，0.5px是可以实现的。但在Andriod手机下，有些Andriod系统的浏览器，会对浮点型数据执行四舍五入的情况，即给元素设置border-width:0.5px，那么其表现与你设置border-width:1px;是相同的。

方案一：放大2倍再缩小

// 放大再缩小
&:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #565D66;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}

方案二：修改透明度为0.5，线条四周看起来会淡很多，或许能骗过小姐姐。

点击穿透问题

原因：移动浏览器提供一个特殊的功能：双击（double tap）放大。导致了著名300ms的时间延迟问题。click是在touch系列事件发生后大约300ms才触发的，混用touch和click就会导致点透问题。

方案一：300毫秒之后再消失弹窗，做个动画消失效果过渡。

setTimeout(() => {
    dialog.close();
}, 300);

方案二：touchStart后300ms都被一个透明不可见的div去覆盖，第二个click是点不到对应的a。

// html

    


// js
function onDeviceReady() {
    setTimeout(function(){ $("#preventClick").hide(); }, 300);
}

方案三：使用fastClick，个人认为最好最简单的方法

方案四：页面全部点击事件换成click，这样会感觉慢慢慢

方案五：页面全部事件换成touch事件，但需要注意的是a标签的href也是click。

Android 浏览器文本垂直居中

原因：在开发中，常使用 line-height 属性来实现文本的垂直居中，但是在安卓浏览器渲染中有一个常见的兼容问题，就是对于小于12px的字体，尤其是奇数的字体大小，使用 line-height 属性进行垂直居中的时候，渲染出来的效果会偏上一些。

方案一：放大两倍，再用 scale 进行缩小一倍

div {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0%, 0%;
}

方案二：使用table布局

// html
// 需要在外面套一层

    aaa


// css
.wrap {
    display: table;
}
.content {
    font-size: 10px;
    display:table-cell;
    vertical-align: center;
}

输入框 focus 以后，软键盘遮挡输入框的情况

尝试 input 元素的 scrollIntoView 进行修复。

// 安卓手机，键盘挡住输入框
if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener("click", function () {
        try{
          if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
              var inputType = document.activeElement.type;
              if(inputType == "checkbox") return;
              setTimeout(function() {
                document.activeElement.scrollIntoView(true);
              }, 0)
          }
        }catch(e){
          console.log("安卓兼容键盘挡住输入框报错", e);
        }
    })
}

fixed+Input

原因：ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位。在某些安卓机下，键盘弹起会引起窗口高度（html标签的高度）变小，而fixed定位是相对于html根元素的，所以会被顶上来了。

方案一：弹起软键盘的时候，把fixed定位的元素改成block，回归文档流，当输入框失去焦点时，又变成fixed定位，还要把滚动条距离记录下。

var screenHeight = document.body.offsetHeight; // 获取视图原始高度
window.onresize = function(){
    if (document.body.offsetHeight < screenHeight) {
        document.getElementsByTagName("nav")[0].style.display = "none";
    }else{
        document.getElementsByTagName("nav")[0].style.display = "block";
    }
};

方案二：iscroll能较好地处理fixed滚动的问题。

禁止蒙层底下页面跟随滚动

原因：弹窗是常见的交互方式，而蒙层是弹窗必不可少的元素。但是，在蒙层元素过长滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动。这是因为触发了冒泡，使得父元素跟着滚动。

方案：很简单，防止出现冒泡即可。设置滚动容器和弹窗为同级节点。

// css
#root{
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

GPU云服务器云服务器疑难问题常见问题 cdn常见问题cdn常见容器常见问题

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

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

移动常见疑难问题

摘要：是在系列事件发生后大约才触发的，混用和就会导致点透问题。获取视图原始高度方案二能较好地处理滚动的问题。禁止蒙层底下页面跟随滚动原因弹窗是常见的交互方式，而蒙层是弹窗必不可少的元素。平时的开发过程中，经常会遇到一些疑难杂症，在这里记录一下常用的解决方案。 UI小姐姐要求的0.5px线原因：不同手机的兼容不一样，尤其安卓 IOS的Safari表现是比较好的，safari是可以支持浮...

klivitamJ 2019-08-30 15:44 评论0 收藏0
我在移动端上遇到的那些疑难杂症

摘要：工作一年多了，相信在座的各位前端也都跟我一样，对在手机上，特别是上出现的各种兼容性感到非常头疼。这篇文章仅作为一份记录供大家参考。我们可以在这个代码的基础上加上媒体查询来完善它工作一年多了，相信在座的各位前端也都跟我一样，对在手机上，特别是iphone上出现的各种兼容性感到非常头疼。这篇文章仅作为一份记录供大家参考。如何画出 1px 的线？首先问大家一个问题，如何在iphone上...

warmcheng 2019-08-23 18:01 评论0 收藏0
Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

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

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

gecko23 2019-08-20 15:08 评论0 收藏0
JavaScript疑难杂症系列-事件循环

摘要：而之后事件循环一直会去遍历任务队列，一旦有任务放入就会放入主线程中执行。任务队列所谓任务是返回的一个个通知，让主线程在读取任务队列的时候得知这个异步任务已经完成，下一步该执行这个任务的回调函数了。 javascript单线程浏览器端，复杂的UI环境会限制多线程语言的开发。例如，一个线程在操作一个DOM元素时，另一个线程需要去删除DOM元素，这个之间就需要进行状态的同步，何况前端可能不...

Keagan 2019-08-26 17:15 评论0 收藏0