移动端遇到的问题（苹果ios、妹子ui）

2024-05-07 03:34:24

移动端遇到的问题

1、H5移动端双击放大缩小问题

在使用了<\meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 的基础上苹果Safari系统依旧可以双击缩放，于是我找到了答案在js中加入

//禁止苹果系统ios10及以上双击放大缩小

window.onload = function() {// 阻止双击放大var lastTouchEnd = 0;document.addEventListener('touchstart', function(event) {if (event.touches.length > 1) {event.preventDefault();}});document.addEventListener('touchend', function(event) {var now = (new Date()).getTime();if (now - lastTouchEnd <= 300) {event.preventDefault();}lastTouchEnd = now;}, false);// 阻止双指放大document.addEventListener('gesturestart', function(event) {event.preventDefault();});
}

即可。

2、苹果Safari系统点击事件失效

原因：ios中不允许点击事件绑定在document或者body上，绑定会失效

失效例子：$(document).on('click', '.carcolourlist', function() {... })(无效)

解决方法：

1、改用.carcolourlist外面的标签，但是不要是document或者body

$('任意.carcolourlist的父元素').on('click', '.carcolourlist li', function() {... })

2、将标签改为a标签或者button，便可点击

3、.carcolourlist标签上增加css样式：cursor:pointer

3、使用妹子UI时，轮播效果图初始化问题

原因：使用妹子UI此轮播图

<\ div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' id="slider">

<\ ul class="am-slides" id="smallpic">

<\ li><\img src="1.jpg" /> <\ /li>

<\ /ul>

<\ /div>

<\ /p>

当我通过JS将<\ li>标签里面的图片循环添加进去时，图片渲染上了，但不轮播这些图片

 $.post('@Url.Action("VehicleMain", "Mall")', { 'Id': @ViewBag.Id }, function (data) {$.each(data.data,function(index,item){$('#slider').flexslider('addSlide', '<\ li><\img class="img100" src="' + item.Image_Url + '"><\ /li>');//将图片以幻灯片插入轮播中});$('#slider').flexslider('removeSlide', 0);//移出第一张幻灯片即第一张图片},'json');

先在html部分写一个img（1.jpg）占位，因为如果js 以替换轮播图的li里面的img内容的方式的话首先会清空img，而清空以后无法达到自动初始化，于是以添加的形式先占位后删除第一站占位图片

移动端遇到的问题（苹果ios、妹子ui）相关推荐

移动端：js判断苹果ios各类机型
最近在做一个移动端的项目,项目出现的一大堆兼容问题是在让我头疼,其中就包括获取当前使用的 ios 的机型.逛了很多圈博客,很多是用了组件实现的,也不知道是我方法没用对还是怎么回事,我用的组件只能获 ...
移动端开发 uniapp 基于苹果ios系统的安全区配置问题
height: calc(630upx + env(safe-area-inset-bottom)); safe-area-inset-left:安全区域距离左边边界的距离 safe-area-ins ...
APEX手游上线，附苹果IOS、安卓端下载教程及安装文件
Apex 手游是一款类似于吃鸡的多人在线射击类大逃杀游戏,如果你之前玩过吃鸡或者守望先锋,那一定是很好上手 Apex 的.Apex 目前已经正式上线了澳洲等十个国家的苹果商店进行测试.今天博主教大家苹 ...
解决苹果ios端微信无法自动播放H5页面背景音乐
最近做微信H5页面开发的时候,在页面加入背景音乐,并且设置自动播放. 在PC端模拟手机时是可以正常显示播放的,在安卓端微信上也可以正常播放,然后到苹果端微信就不能正常播放了. 找了许久的原因是苹果io ...
删除苹果自带软件后果_苹果IOS备忘录便签软件敬业签恢复删除内容应该怎么操作？...
敬业签是一款功能比较全面的苹果手机桌面备忘录便签软件,主要功能包括:云储存.多端云同步.提醒待办事项.时间管理.标记已完成.月视图和时间轴等.在使用苹果IOS备忘录便签软件敬业签的时候,如果不小心误删 ...
ios 监测网页按钮_苹果IOS备忘录便签软件敬业签恢复删除内容应该怎么操作？...
敬业签是一款功能比较全面的苹果手机桌面备忘录便签软件,主要功能包括:云储存.多端云同步.提醒待办事项.时间管理.标记已完成.月视图和时间轴等.在使用苹果IOS备忘录便签软件敬业签的时候,如果不小心误删 ...
华为新系统鸿蒙效果,19款华为手机内测新系统，流畅度比肩苹果iOS，优先体验鸿蒙OS...
原标题:19款华为手机内测新系统,流畅度比肩苹果iOS,优先体验鸿蒙OS 在前不久举办的HDC 2020大会上,华为新系统EMUI 11终于发布,10款老机型率先开启EMUI 11 Beta版内测,更 ...
安卓手机真的不行了，搞不定卡顿问题，只能抄袭苹果iOS系统，然而各怀鬼胎的它们终究画虎不成反类犬...
近期安卓手机品牌开始推送新功能,更新了这个新功能后就有了类似苹果iOS系统的墓碑机制,这可以在一定程度上解决安卓手机的卡顿问题,如此做恰恰说明了国产手机不如苹果,难怪消费者越来越认可iPhone了. ...
运用fiddler工具深度配置证书抓苹果IOS微信小程序或app数据请求
本教程详细演示fiddler的配置安装证书,与手机端配置安装证书并进行捕获请求,分析数据,如有疑问,可咨询! 使用工具下载: fiddler:https://www.telerik.com/downl ...

最新文章

热门文章