专栏首页编程之旅移动端H5页面踩过的CSS坑

移动端H5页面踩过的CSS坑

1、Android浏览器下line-height垂直居中产生偏离

举例:按钮中使用 line-height 来做垂直居中,但实际字体处于偏上方位置

知乎有网友的评论是:这个问题通过css是无法解决的,即使解决了也是一种通过微调来实现的hack方法,因为文字在content-area内部渲染的时候已经偏移了,而css的居中方案都是控制的整个content-area的居中。

那么此处建议垂直居中可以使用flex布局来做,比如:

height: 36px;
display: flex;
align-items: center;
justify-content: center;

线上的移动端页面垂直居中我大部分都是这么写的,三端表现都很一致。

2、hairline 问题

已知方法:

1、安卓浏览器无法处理 .5px,所以 .5px在安卓手机上依然按照 1px 渲染

2、目前 styles/mixins/hairline.less 中定义了 hairline 的 Mixins , 是一种伪类 + transform 实现的实现方式

优点:所有场景都能满足,支持圆角

缺点:对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套

暴露问题:该方法本身应该是最优解,但是在 lib-flexible 的 rem 适配方案中,在安卓平台中1px的边框在转化为rem时,在andriod webview以及部分低版本ios webview 会看不到

该种情况频繁发生在一个界面有多个 hairline 的时候,例如表单界面,暂时未找到解决办法

3、使用 box-shadow 模拟边框

利用css 对阴影处理的方式实现0.5px的效果 样式设置:

.box-shadow-1px {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

优点:代码量少, 可以满足大部分场景,经过实测,在安卓手机上表现不错,未出现缺少线条情况,并且渲染出的样式符合 hairline 要求

缺点:边框有阴影,颜色变浅,并且封装的易用性不如 hairline 灵活

建议:在大面积使用 hairline 的时候,使用方法 3,其余情况使用方法 2

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS开发——步数获取

    最近半个月的开发工作,重点一直是类似于悦跑圈、咕咚这样的运动产品的功能,所以在处理iOS设备在运动中的表现也是积累了一些经验。

    Originalee
  • iOS开发——Block在实际项目中的传值

    在iOS开发中,我们会在实际过程中大量使用Block,其中Block有个很基础的功能,就是完成两个页面间的传值。而今天,我就用实际的项目中的页面,来展示如何完成...

    Originalee
  • iOS开发——数据持久化之归档

    在实际的项目开发中,数据持久化是我们必须要考虑的一个事情,如何把我们需要的数据进行持久化处理。

    Originalee
  • 推荐 | 收藏备用:大数据分析工具采购指南

    大数据分析工具使用户能够分析各种各样的信息——包括结构化事务数据和社交媒体帖子、Web服务器日志文件及其他形式的非结构化和半结构化数据。一旦组织决定要购买一个大...

    CDA数据分析师
  • 如何爬取当当网畅销书排行榜信息? requests + pyquery

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    云雀叫了一整天
  • 搜索技术的秘密(一):概览

    「多字段搜索」是一个非常复杂的话题,设想你有一堆日志记录,有很多字段。然后产品经理希望可以通过各种组合字段进行搜索,比如根据时间段、用户 ID、行为类型、目标 ...

    老钱
  • vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个...

    小周sri的码农
  • python 重载字典UserDict

    class StrKeyDict(collections.UserDict): # <1>

    用户5760343
  • 注解式Schedule配置定时任务

    很简单,要注意的是 设置时间间隔有两种 corn和fixedRate,一种适用于较长的时间而且能设置特定时间,一种则较短。

    ydymz
  • IE内核浏览器的404页面问题和IE自动缓存引发的问题

    mcq

扫码关注云+社区

领取腾讯云代金券