iOS前端陷阱

最新推荐文章于 2024-04-21 08:37:16 发布

w_xue

最新推荐文章于 2024-04-21 08:37:16 发布

阅读量207

点赞数

分类专栏：前端文章标签： ios css html

本文链接：https://blog.csdn.net/w_xue/article/details/118998952

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文探讨了在iOS平台上的开发难点，如Dateapi日期解析异常和textjustify文本对齐问题。作者提供了使用momentjs替代Dateapi处理日期格式和针对iOS特性的文本调整技巧，以确保跨平台兼容性。

摘要由CSDN通过智能技术生成

写好的h5网页，在桌面chrome端和移动android端运行都正常，iOS端有一些特殊的地方需要记录

Date api异常

在iOS平台以下代码无效，对于时间字符串有固定的格式要求

let date = new Date('2021-09-01 11:00')

推荐统一使用moment api来处理时间

text justify无效

在固定宽度文本块中如果设置text-align为justify时会发现iOS平台无效，原因很简单，iOS平台的justify对文本的最后一行是无效的。
一般解决办法为在文本后面通过伪元素再添加一段内容使得内容换行，保证用户可见内容分散对齐，具体做法如下

            .key {
              width: 100px;
              font-size: 24px;
              font-weight: 400;
              text-align: justify;
              text-align-last: justify;
              text-justify: inter-ideograph;
              color: #999999;
              height: 24px;
              padding: 8px 0 10px;

              // 针对ios系统上最后一行justify无效的问题，额外添加一行
              &:after {
                display: inline-block; /*行内元素*/
                content: '';
                width: 100%; /*可以挤掉文字，保证不跟文字在同一行*/
                height: 0;
                visibility: hidden;
              }
            }