HTML5学堂-码匠 HTML5学堂

您当前位于:项目开发经验积累 ——> 移动端项目开发经验 - 移动端HTML与CSS的相关问题

移动端项目开发经验 - 移动端HTML与CSS的相关问题

2015/07/16 13:20:05 | 作者:HTML5学堂(码匠) | 分类:项目开发经验积累 | 关键词:移动端,兼容问题,开发经验

移动端兼容系列 HTML与CSS兼容

HTML5学堂:本文,我们将继续为大家总结介绍移动端的常见兼容问题,今天要提的是关于移动端HTML与CSS当中,遇到的一些常见兼容问题,主要包括取消电话号码的识别、取消邮箱识别以及横向rem的问题。

对于移动端的兼容问题,由于内容较多,决定书写成一个系列。在这些杂乱知识的发现与整理,主要来源于几个讲师平时的积累,而自己的学生们也为内容的充实做出了很大的贡献,在此非常感谢~!不再多说,一起进入今天的主要内容。

移动端兼容 - 取消电话号码识别

具体情形:在iPhone上页面中的数字识别为电话号码。

我们书写的初始结构如下:

  1. <li>
  2.     <h2>HTML5学堂</h2>
  3.     <p>18100010001</p>
  4.     <div>HTML5学堂是一个热爱H5的讲师们组成的组织。致力于构建一个前端、HTML5的分享平台。能够给学生提供一些资料,也为广大前端爱好者提供一个分享平台。其中涉及到基本的知识、实例开发、JS底层知识、面试真题、相关技术、未来发展等。</div>
  5. </li>

在iPhone中代码会自动处理成如下:

  1. <li>
  2.     <h2>HTML5学堂</h2>
  3.     <p>
  4.         <a href="tel:18100010001" title="">18100010001</a>
  5.     </p>
  6.     <div>HTML5学堂是一个热爱H5的讲师们组成的组织。致力于构建一个前端、HTML5的分享平台。能够给学生提供一些资料,也为广大前端爱好者提供一个分享平台。其中涉及到基本的知识、实例开发、JS底层知识、面试真题、相关技术、未来发展等。</div>
  7. </li>

从代码中不难看出,在p标签内部增加了一个a标签用于包含电话号码。

解决方法:在网页文件的文件头部设置如下代码即可:

  1. <meta content="telephone=no" name="format-detection" />

移动端兼容 - 取消电子邮箱识别

具体情形:在安卓平台手机中,页面中的邮箱信息会被识别为邮箱地址,成为可点击的链接。基本原理和我们上面刚说的iPhone中电话号码是一样的,因此我们就直接来说解决办法。

解决方法:在文件头部加入如下代码即可。

  1. <meta content="email=no" name="format-detection" />

rem水平方向上的兼容问题

具体情形:移动端布局时,横向使用rem(相对度量单位)时,会在部分手机浏览器当中出现问题。

横向布局使用rem时的正常页面效果

横向布局使用rem时 正常页面效果

华为mete7内置浏览器上页面效果

使用rem 华为mete7内置浏览器的页面效果

PS:目前只是测出华为有问题,其他手机貌似没有问题。

解决方法:水平方向用百分比来实现。具体百分比以及rem的选择,之前写过比较详细的文章,可以点击此处查看——>移动端页面的开发方法 - 系列

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS