坑!!!高清解决方案导致iOS 上h5页面滑不动的解决办法

news/2024/11/9 0:06:51/

首选这个问题出现在我们一个h5页面的首页上,滑不动!在iPhone X和iPhone 11上并且系统版本发现是13.2.2,而iPhone  X  Max 系统版本12.2的并没有出现。所以我估摸着应该是iOS系统版本13.0以上都会有问题。

然后写了个监听容器滚动的方法,也是参考别人的代码:https://blog.csdn.net/qq_39198420/article/details/76502267

//  添加滑动监听事件let startx = 0let starty = 0// 获得角度const getAngle = (angx, angy) => {return (Math.atan2(angy, angx) * 180) / Math.PI}// 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动const getDirection = (x, y, endx, endy) => {const angx = endx - xconst angy = endy - ylet result = 0// 如果滑动距离太短if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {return result}const angle = getAngle(angx, angy)if (angle >= -135 && angle <= -45) {result = 1} else if (angle > 45 && angle < 135) {result = 2} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {result = 3} else if (angle >= -45 && angle <= 45) {result = 4}return result}// 手指接触屏幕document.addEventListener('touchstart', e => {startx = e.touches[0].pageXstarty = e.touches[0].pageY}, false)// 手指离开屏幕document.addEventListener('touchend', e => {const endx = e.changedTouches[0].pageXconst endy = e.changedTouches[0].pageYconst direction = getDirection(startx, starty, endx, endy)switch (direction) {case 0:console.log('未滑动!')breakcase 1:console.log('向上!')breakcase 2:console.log('向下!')breakcase 3:console.log('向左!')breakcase 4:console.log('向右!')breakdefault:console.log('default')}}, false)

最后是大佬告诉我是app上的body高度有问题, 安卓body高度是页面屏幕,ios是整个页面内容,估计是阿里检测那个屏幕dpr有问题, 有的手机不对,不过要手动给html设置字体大小了。

所以就是要禁止阿里的高清解决方案,然后手动设置字体大小

forbidden-h-d.js

export default (() => {const scale = 1window.viewportScale = 1const metaArr = document.head.getElementsByTagName('meta')for (let i = 0; i < metaArr.length; i++) {const metaEl = metaArr[i]if (metaEl.name === 'viewport') {metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${ scale },maximum-scale=${ scale },minimum-scale=${ scale }`)}}document.documentElement.style.fontSize = '50px'}
)

然后引入这个方法

import forbiddenHD from './forbidden-h-d'// 如果是iOS就禁止高清解决方案if (isIos()) {forbiddenHD()}

 

 

 

 

 

 

 


http://www.ppmy.cn/news/432259.html

相关文章

页面不能滑动css,css:touch-action致使安卓没法滚动页面

前言 相信你们搜css touch-action很容易搜到一批文章,但感受本身仍是须要写下本身这这个过程当中的一些探索经历。css 之因此写,是由于单独去学知识点或者单独看一篇文章其实很简单的,难的是在本身实践中,由于一个问题找一个方案,而后又引发另一个问题,而这个不断发现问题…

Android手机哪个悬浮好用,别羡慕苹果了,安卓悬浮神器比 iPhone 好用太多!

都 2021 年了&#xff0c;你还不知道安卓悬浮球是款神器&#xff1f; 就在不久前&#xff0c;小黑被友人如此嘲讽。作为一名经常接触数码科技的资深搞机党&#xff0c;小黑一直对悬浮球应用嗤之以鼻。原因也很简单&#xff0c;悬浮球给小黑带来的体验过于差劲。 返回桌面、打开…

大数据杀熟!用苹果手机怪我咯?

导读&#xff1a;有微博大V爆料称&#xff0c;用滴滴打车时&#xff0c;同样行程、同样叫车时间&#xff0c;显示的价格却不一样。不仅如此&#xff0c;长距离出行时&#xff0c;苹果手机打车比安卓手机打车贵不少。用苹果电脑在 Orbitz 上搜房间&#xff0c;价格就比用 PC 搜出…

用什么软件可以测试二手手机真假,小编教你如何检测二手iPhone手机,再也不用担心啦...

原标题:小编教你如何检测二手iPhone手机,再也不用担心啦 买二手的iPhone手机,不会检测的,小编教你,很简单,只需要几个步骤就完成了,不要问小编为什么要买二手iPhone手机,还不如去官方购买安全方便!实话说,如果有这个钱,我当然会选择去官方买,但是手机而已,没那个必…

linux屏幕滑动效果实现代码,使用swipe方法模拟屏幕滑动与手势密码绘制

前言 App自动化测试中有两个很重要的操作,屏幕滑动与绘制手势密码。目前很多App在启动时,都存在启动时的引导动画或者加载上下文内容时需要手动上滑或者下滑加载页面,所以在自动化测试的过程中模拟手的滑动操作看起来就很重要了;第二个比较重要的是模拟手动绘制九宫格完成手…

苹果小圆点怎么关闭_我来教你怎么好好地调戏iphone上的小圆点

今天芷蓝跟大家聊聊苹果手机上的 Assistive Touch 功能&#xff0c;就是我们经常看到的那个小圆点。苹果最初设计它是为残障人士准备的&#xff0c;不过现在越来越多的用户已经离不开它了&#xff0c;今天芷蓝就给大家分享几个关于小圆点的玩法。 1 使用小圆点有什么好处&#…

手机摄影笔记(二)

第5章 镜头语言 镜头语言分类&#xff08;8个&#xff09;&#xff1a; 推&#xff1a;从远到近 拉&#xff1a;从近到远 摇&#xff1a;机位固定&#xff0c;旋转手机拍全景或者跟着拍摄对象进行摇摄&#xff08;跟摇&#xff09;.通常用此方式来介绍环境时&#xff0c;表现的…

苹果手机又刷屏啦!!它是如何做到的?

2020年4月15日11:38分&#xff0c;苹果公众号猝不及防地推了一则推送&#xff0c;在夜间平静的朋友圈炸起了圈圈水花&#xff0c;瞬间完成了跨圈层的微信刷屏。要知道&#xff0c;往常一个品牌想要达成这种声量&#xff0c;往往布置大量的广告、活动、代言&#xff0c;而且即使…