视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
魅族手机浏览器兼容性调优最佳实践_html/css
2020-11-27 16:14:31 责编:小采
文档

问题一、非 position:absolute 容器 height:100% 不生效,导致 bottom 定位错位

截图1:容器实际高度渲染为0

截图2:

节点1 样式中包含了 position:relative ; height:100%; 但在魅族手机浏览器中高度被渲染为0
节点2 定义了 bottom:-140px; 定位出错

解决方案:

1、节点1使用 position:absolute
2、或 height 写死为父容器 高度
3、或 节点2 使用 top 定位,为了兼容ie浏览器尽量使用 top 代替 bottom 也是一条最佳实践

问题二、魅族手机浏览器中部分段落文字字号会被自动放大

这个是魅族手机浏览器(优化阅读体验)的特性,当页面的 contentWidth 大于 800px 时会被浏览器视为PC版页面,从而触发该逻辑。
关闭该特性的方法是,在最外层的div节点上加上 class="copyr" ,其节点内所有子节点将关闭自动放大字号的特性。需要注意的是加 body 节点上是无效的。

以下是关闭特性后的效果截图:

暂时只发现以上两条,如有其他问题会继续补充,欢迎跟帖反馈:)

下载本文
显示全文
专题