信誉好的网站建设公司,宁波咨询网站设计,网页界面设计作品,有源码帮忙搭建网站吗前言
去年主要工作就是混合开发#xff0c;写app内嵌的h5。在开发期间多多少少遇到些兼容性问题#xff0c;最近工作比较清闲#xff0c;整理下方便以后查阅#xff0c;也希望能帮助到一些同学。 并且本文会持续补充内容#xff0c;欢迎关注我#xff0c;另外我会更新一…前言
去年主要工作就是混合开发写app内嵌的h5。在开发期间多多少少遇到些兼容性问题最近工作比较清闲整理下方便以后查阅也希望能帮助到一些同学。 并且本文会持续补充内容欢迎关注我另外我会更新一些前端方面的其他一些知识。
1. ios端 new Date() 问题
问题描述 ios规定日期要以“ / ”分割而不能用“ - ”。 比如在iosnew Date(2023-01-01 00:00:00) 会返回NaN在pc端safari是Invalid Date 解决办法 改用“/”分割例如new Date(2023/01/01 00:00:00) **替换字符串 **new Date(“2023-01-01 00:00:00”).replace(/-/g, “/”);
2. ios端 h5返回不刷新页面
问题描述 ios端打开h5页面后从a页面跳转到b页面然后再返回a页面之后发现a页面没有刷新。貌似是ios会在浏览网页后生成一个类似快照的东西当返回时直接调用这个快照进行展示从而提高性能。安卓手机的h5返回时都会刷新ios好像是部分机型也会刷新。 但是如果我们需要在返回时重新获取下最新的信息这个机制就会存在bug。 解决办法
//pageshow里的 persisted 属性 表示该页面是否从浏览器缓存中读取。
window.addEventListener(pageshow, function (event) { if (event.persisted) { //重载页面或者刷新数据}
}); 3. 移动端媒体自动播放
问题描述 安卓和ios对媒体的自动播放都有不同的限制要求。比如ios要求至少要有一次交互才能开始播放。 解决办法\
在微信环境内可以利用微信的api微信内置浏览器的私有对象WeixinJSBridge实现自动播放其他环境下为了保证兼容性一般最好有个缓冲页面用来加载资源并提示用户点击开始播放。
var audio document.getElementById(id)
document.addEventListener(touchstart,play, false);
play function(){audio.play();document.removeEventListener(touchstart,play, false);
};
audio.play();//兼容微信
document.addEventListener(WeixinJSBridgeReady, function () {play();
}, false);4. ios端 点击事件有300秒延迟
问题描述 由于早期iphone设计了双击放大的功能所以要判断用户操作是单机还是双击所以做了300ms的延迟判断。 解决办法\
设置不能缩放user-scalableno或者设置显示宽度widthdevice-width (常用简单快捷
meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno使用fastclick库
window.addEventListener(load,function () {FastClick.attach(document.body);
},false);
使用touchstart事件代替click事件
5. 安卓端 底部按钮在调用输入法时被顶起来
问题描述 在安卓端用absolute/fixed将一个按钮固定在页面底部时如果调用输入法这个按钮也会被输入框顶起来 解决办法 使用媒体查询在页面高度小于某值时设置元素top值 meida screen and (max-height: 400px) {}
6. 移动端 键盘遮挡输入框问题
问题描述 当输入框固定在最底部点击输入框调起输入法的软键盘后输入框会被遮挡。 解决办法 \
如果你的底部输入框是用fixed定位固定在下方的一般不会出现这问题如果出现了可以考虑监听网页resize事件或者输入框focus事件动态修改输入框位置如果是用absolute或者relative实现的可能是你最外层的盒子高度写死了。使用scrollIntoView方法将输入框滚动到可视区域document.getElementById(‘inputId’).scrollIntoView();
7. 移动端 1px 边框变粗
问题描述 在移动端给元素设置1px的边框时总是感觉好像不止1像素好像被加粗了了解原因 解决办法 div{position: relative;border:none;}div:after{content: ;position: absolute;top: 0;left: 0;border: 1px solid #000;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%;height: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top;transform-origin: left top;}8. ios端 无滚动惯性
问题描述 在ios端使用了absolute布局之后会发现元素内的滚动非常不流畅滑动的手指松开后滚动会立刻停止没有滚动惯性。 解决办法
-webkit-overflow-scrolling: touch;9. 禁止 ios 弹出各种操作窗口
-webkit-touch-callout:none10. 禁止 ios 识别长串数字为电话
问题描述 在ios端会把数字识别成电话号码导致增加超链接样式并且可以点击拨打 解决办法
meta nameformat-detection contenttelephoneno
meta http-equivx-rim-auto-match contentnone11. ios端 输入框聚焦出现阴影
问题描述 在ios端input输入框在聚焦的时候有时候会出现outline或者阴影安卓则是显示正常的。 解决办法
input:focus{outline:none} input:{-webkit-appearance: none;}12. ios 端search类型的输入框自带搜索图标
问题描述 ios 15以上的版本search类型的输入框会自带图标 解决办法 我们可以用css将其隐掉: input[typesearch]{-webkit-appearance:none;}[typesearch]::-webkit-search-decoration { display: none; }input::-webkit-search-cancel-button {display: none;}
13.ios端 swiper轮播图设置圆角滑动时会先变成直角再变回圆角
解决办法 在父盒子上加下面css overflow:hiddentransform:translateY(0)14. 安卓端 部分机型点击图片会放大 img{ pointer-events:none; }
