移动端踩坑系列总结(一)

### 移动端踩坑系列总结(一)

> 移动端常见问题汇总,以及简单的解决方案。

#### 特殊字体

特殊字体尽量少用,毕竟你不知道,你不知道,某些手机,是如何渲染特殊字体的,看下面的一段代码:

下面的结构
“`

- 会议日程 -

- 会议日程 -

– DESIGN BY YUX -
– DESIGN BY YUX -
中文字体测试
中文字体测试

“`

关键的CSS代码为:

“`
@font-face {
font-family: ‘main316′;
src: url(“fonts/main316.woff2″) format(“woff2″),
url(“fonts/main316.woff”) format(“woff”),
url(“fonts/main316.ttf”) format(“truetype”),
url(“fonts/main316.svg”) format(“svg”);
font-weight: normal;
font-style: normal;
}
.main316-font {
font-family: ‘main316′;
}
.sans-serif {
font-family: sans-serif;
}
.title {
font-size: 20px;
line-height: 1.4;
}
.desc {
font-size: 14px;
line-height: 1.4;
}

“`

那么来看看,这样的字体,在有些手机上,变成了什么样子:
![Alt text](/study/2018/20180317/images/1.png)

上面的截图,是使用iPhone7的Safari浏览器截图的,注意划线的地方,在这个简单的居中处理中,就有两个问题出现了。

1. “会议”左侧的中划线与汉字重叠了
2. 英文字体居中的样式,不居中了。

这代表着什么?代表着,在你以后使用特殊字体时,要特别注意去验证,这个字体是否会照成排版的错乱。

这里只是举了一个特殊的例子,并不代表着,特殊字体,只有这一种异常出现,所以希望如果您在使用特殊字体,那么请注意所有使用特殊字体,在不同浏览器下的样式表现。

可以直接查看示例:[特殊字体,导致排版错乱的DEMO](/study/2018/20180317/font-test.html)

那么关于这个,如何能处理一下呢,总不能因为这样,把本该使用特殊字体的地方,都使用常规字体吧。

这里的错位,可能受字体本身有影响,之所以说这个问题,只是希望各位在以后使用特殊字体的时候,尽量注意一下,别提测之后,发现这样的布局错乱的BUG,就很尴尬了。

最简单的解决方案:

“`html

- 会议日程 -

- 会议日程 -

- DESIGN BY YUX -

“`

这里是针对居中的一个解决方案,不是针对所有特殊字体导致的布局问题的解决方案,只需要把特殊字体使用一个`inline`类型的标签包裹一下,就可以解决,注意,只能能`inline`类型的标签,不能是`block`和`inline-block`的标签。

`block`的标签会导致问题依然是原有的样子,而`inline-block`会导致新的布局问题出现,有兴趣的这里可以自己尝试一下,就不在给示例了。

至于为什么,`inline`类型的,可以做到这个效果呢?首先,`inline`类型的元素宽度,是根据内容变化的,内容固定了,那么`inline`元素的宽度也就固定了,而父元素的居中处理,这里主要是居中了`inline`元素。

#### 关于移动端内嵌iframe

如果您有需求说,希望在一个项目中,内嵌一个别的页面(单页应用中,直接跳转的话,就不需要内嵌了),那么这个时候,就要多注意一下了:

1. iframe嵌入的页面,最好不要有音频视频类的操作,不然只能通过动态添加iframe(显示时)和移除(隐藏时)iframe来保证,视频和音频不会影响其他的页面,如果只是做显示和隐藏的话,那么在iframe隐藏时,依然有音乐或者视频的声音,简直是个不可容忍的体验。
2. iframe不可引入需要授权的页面(微信),如果您iframe内部,引入的iframe在加载的时候,需要用户授权,请一定要使用链接跳转来操作,在IOS的系统的微信中,iframe是不能显示授权的,所以这个iframe就会处于一直白屏的状态,依然无法容忍。

授权的DEMO,可以参考:[iframe内部,使用需授权的DEMO](/study/2018/20180317/iframe-test.html)

#### 移动端嵌入音频

如果只是在页面嵌入一个音频,在H5已经支持性这么好的情况下,可以直接使用`audio`标签,并且可以使用`play`和`pause`方法,直接来操作音频的播放和暂停。

只是这里有个需要注意的地方是:

在`IOS`端,`audio`的`autoPlay`属性,是无法执行的,甚至你直接使用`play`方法,也是无法自动播放音频的,这可能与`IOS`对`audio`的处理机制有关,首先需要您对页面有操作(触摸屏幕),之后再执行`play`,即可正常播放,之后的`play`和`pause`也都会正常。

音频的DEMO:[音频播放的DEMO](/study/2018/20180317/audio-test.html);

本篇到此结束,该系列以后会慢慢更新罗列一些,在移动端开发中,常出现的问题,需尽量避免。

备注:这些东西,并没有花时间好好研究,毕竟这只是兼容方面的东西,只要有一种解决的方案即可,我个人认为,并不需要把所有的解决方案都研究一下,因为并没有通用性。

本文地址:http://www.zhangyunling.com/?p=821

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>