移动端兼容系列 HTML与CSS兼容
HTML5学堂：本文，我们将继续为大家总结介绍移动端的常见兼容问题，今天要提的是关于移动端HTML与CSS当中，遇到的一些常见兼容问题，主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。
对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生们也为内容的充实做出了很大的贡献，在此非常感谢~！不再多说，一起进入今天的主要内容。
移动端兼容 - 取消电话号码识别
具体情形：在iPhone上页面中的数字识别为电话号码。
我们书写的初始结构如下：
HTML5学堂
18100010001
HTML5学堂是一个热爱H5的讲师们组成的组织。致力于构建一个前端、HTML5的分享平台。能够给学生提供一些资料，也为广大前端爱好者提供一个分享平台。其中涉及到基本的知识、实例开发、JS底层知识、面试真题、相关技术、未来发展等。
在iPhone中代码会自动处理成如下：
HTML5学堂
HTML5学堂是一个热爱H5的讲师们组成的组织。致力于构建一个前端、HTML5的分享平台。能够给学生提供一些资料，也为广大前端爱好者提供一个分享平台。其中涉及到基本的知识、实例开发、JS底层知识、面试真题、相关技术、未来发展等。
从代码中不难看出，在p标签内部增加了一个a标签用于包含电话号码。
解决方法：在网页文件的文件头部设置如下代码即可：
移动端兼容 - 取消电子邮箱识别
具体情形：在安卓平台手机中，页面中的邮箱信息会被识别为邮箱地址，成为可点击的链接。基本原理和我们上面刚说的iPhone中电话号码是一样的，因此我们就直接来说解决办法。
解决方法：在文件头部加入如下代码即可。
rem水平方向上的兼容问题
具体情形：移动端布局时，横向使用rem(相对度量单位)时，会在部分手机浏览器当中出现问题。
横向布局使用rem时的正常页面效果
华为mete7内置浏览器上页面效果
PS：目前只是测出华为有问题，其他手机貌似没有问题。
解决方法：水平方向用百分比来实现。具体百分比以及rem的选择，之前写过比较详细的文章，可以点击此处查看——>移动端页面的开发方法 - 系列
欢迎沟通交流~HTML5学堂
1704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
