前端切图周记-2

文章发布于2020年05月28日 14:18, 归类于: 前端

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">

转载请注明来源:《 前端切图周记-2》- rojerYong's Blog

文章链接:https://www.eoway.cn/article/1590646701.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:js节流与防抖 下一篇:vue2.x遇到ie11不兼容的坑