2020年5月28日 阴

昨天，把切好的h5网页放在了codingPage静态部署，真机测试出一些问题，需要记录下来。

手机自带浏览器底部工具栏挡住h5页面

华为荣耀自带的浏览器工具栏自动悬挂在浏览器底部，刚好把我的tabbar挡住。

这个手机使用的是qq浏览器x5内核。

华为荣耀手机自带浏览器工具栏挡住前端页面视图，tabbar无法显示：

正常的手机浏览器：

解决方法： 在head新增一条meta，默认全屏显示这个h5页面，浏览器工具栏就不会自动弹来弹去。

<meta name="x5-fullscreen" content="true">

苹果手机修改数字样式失败

文章参考自：

1. format-detection属性
2. x-ms-格式-检测

在苹果Safari浏览器中打开这个h5，部分数字颜色显示成灰色，无法修改。

原因：format-detection 属性确定元素文本中的数据格式(如电话号码)是否自动转换为可跟踪链接。

<meta meta name="format-detection" content="telephone=yes">

某些浏览器中format-detection属性的content中的值默认为yes。

content	说明
telephone	telephone=yes:数字转化为拨号链接。telephone=no:关闭格式检测。
email	email=yes:文字默认为邮箱地址。 email=no:关闭格式检测。
adress	adress=yes点击地址直接跳转至地图。adress=no:关闭格式检测。

解决方法： 把format-detection属性的值改为no，关闭格式检测。

<meta meta name="format-detection" content="telephone=no,email=no,adress=no">