移动端前端开发问题若干踩坑

最新推荐文章于 2021-05-27 10:56:17 发布

原创最新推荐文章于 2021-05-27 10:56:17 发布 · 472 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

javaScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文总结了移动端前端开发中遇到的一些问题，包括滚动穿透、ios输入框阴影、fixed定位与软键盘冲突、小于1px边框、flex布局兼容性、内核检测、h5自刷新方案以及img标签预览的取消，并提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.滚动穿透问题

弹出层内容滚动时，body跟随滚动。

解决方案：https://blog.youkuaiyun.com/weixin_43921521/article/details/91434165

2.ios浏览器的input，textarea有内上边框阴影

解决方案：css样式

box-shadow:0px 0px 0px rgba(0,0,0,0); 
-webkit-appearance:none;

3.移动端fixed和input获取焦点软键盘弹出影响定位的问题

fixed定位位于底部时，软键盘弹出导致定位错误(页面hight被键盘上顶),多出现于安卓

解决方案：
i.监听页面高度变化:

var h = document.body.scrollHeight;
    window.onresize = function(){
        if (document.body.scrollHeight < h) {
            document.getElementsByTagName("nav")[0].style.display = "none";//获取fixed定位元素的dom
        }else{
            document.getElementsByTagName("nav")[0].style.display = "block";
        }
    };

ii.监听input焦点：

//输入框获得焦点事件
document.querySelectorAll(".inputItem").focus(function () {
    //todo
    document.getElementsByTagName("nav")[0].style.display = "none";//获取fixed定位元素的dom
});
//输入框失去焦点事件
document.querySelectorAll(".inputItem").blur(function () {
    //todo
    document.getElementsByTagName("nav")[0].style.display = "block";
});

4.border小于1px

安卓默认最小border为1px，若要设置小于1px的border

解决方案：css样式，使用伪类

.text{
    position:relative;
}
.text:after{
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    left: 0;
    z-index: 2;

5.flex布局兼容问题

解决方案:https://blog.youkuaiyun.com/weixin_43921521/article/details/90675254

6.移动端内核检测：

(function (){  
		var u = navigator.userAgent, app = navigator.appVersion;  
			return {//移动终端浏览器版本信息
				 trident: u.indexOf('Trident') > -1, //IE内核
				 presto: u.indexOf('Presto') > -1, //opera内核
				 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
				 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
				 mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
				 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
				 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
				 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
				 iPad: u.indexOf('iPad') > -1 //是否iPad
			 };  
} ())

//chrome ios6/7/8机型
/*
android: false
gecko: false
iPad: false
iPhone: true
ios: true
mobile: true
presto: false
trident: false
webKit: true
__proto__: Object
*/

7.移动端内嵌h5，h5自刷新方案：

1、Document.hidden
只读属性
布尔值
简单的表示标签页显示或者隐藏
如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。
2、Document.visibilityState
只读属性
是一个用来展示文档可见性状态的字符串,
可能的值：
visible: 页面内容至少是部分可见。在实际中，这意味着页面是非最小化窗口的前景选项卡。
hidden : 页面内容对用户不可见。在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。注释：浏览器支持是可选的。
unloaded : 页面正在从内存中卸载。注释：浏览器支持是可选的。
3、Document.onvisibilitychange
EventListener 提供在visibilitychange 事件被触发时要调用的代码。

//监听visibilityChange事件

//兼容不同端visibilityChange事件
function ifPageHidden(){
	var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
	}
	return {
		hidden:hidden,
		visibilityChange:visibilityChange
	}
}

function handleVisibilityChange(){
  if (document[state.hidden]) {
      //页面跳转出去前
      //do something...
      } else  {
     //页面跳转回来后
     //do something...
  }
}

let state=ifPageHidden()
// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === "undefined" || typeof document[state.hidden] === "undefined") {
      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
    } else {
    // 添加监听器
    document.addEventListener(`${state.visibilityChange}`, handleVisibilityChange, false);
}


//请求刷新注意事项
//请求需要在监听前请求，不然请求不会发出去，因为该钩子只在页面跳转(显示/隐藏)的时候触发
//多用于在A页面跳转到B页面操作后，数据在B页面更新，B页面跳转回A页面后，更新A页面对应数据
/*例如：
getRequestData()		//请求数据方法
function handleVisibilityChange() {
	if (document[state.hidden]) {
      //页面跳转出去前
      //do something...
	} else  {
		//页面跳转回来后
		//do something...
		getRequestData()		//请求数据方法
	}
}
*/

8.img标签点击取消预览：

1.css添加:

img{
	pointer-events: none;
}

2.js阻止默认事件

var img = document.getElementById('banner');
 
img.addEventListener('click',function(e){
 
　　e.preventDefault();
 
});