记一次web移动端与ios的兼容问题

记一次web移动端与ios的兼容问题

    • 1、new Date()在ios上面不兼容
    • 2、点击input框,页面会放大
    • 3、:active在安卓和web上都有效,唯独在ios上没效果
    • 4、取消在ios上自带的长按触发功能

1、new Date()在ios上面不兼容

我这次开发的项目涉及到时间的计算,本来在google上测试没问题,在andriod测试也没问题,但在ios上显示却是invalid date。。。
因为在安卓这些都没问题,就直接确定了可能是ios的兼容问题,然后去百度。
果然,就是new Date()里设置日期时不能是2019-12-27这种格式,必须为2019/12/27这种格式。2019/12/27这种andriod和ios都可以识别。
所以,直接用个正则就行了。如:
	var time = '2019-12-27';
	new Date(time.replace(/-/g,"/"));

2、点击input框,页面会放大

当时遇到这个问题,一脸懵逼,当时没太注意,认为就是样式问题。因为布局是用的rem+vw,照理说不应该出现样式问题啊。。。
这个问题一度让我认为ios与rem有兼容问题。然后又去百度。。。有些大佬说是因为webview的font-size可能默认设置了大小,要让原生开发人员去了那个默认大小。
当时忙着其他工作,就暂时没去问原生开发人员。后来,我自己拿着测试手机测了下,发现只有input输入框聚焦时,页面会放大,这样才出现了样式问题,然后问题根源就找到了。。。
又去百度,在html页面加上以下设置就好。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
对了,viewport-fit=cover设置是为了解决有些ios手机页面下方出现空白问题。(ps:这又是一个兼容问题。。。)

3、:active在安卓和web上都有效,唯独在ios上没效果

	在body上添加:
ontouchstart = ""
onmouseover = ""

4、取消在ios上自带的长按触发功能

	-webkit-touch-callout: none;

你可能感兴趣的:(javascript,vue.js,html5,css3)