专栏首页HTML5学堂移动端兼容系列 HTML与CSS兼容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

rem水平方向上的兼容问题

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

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

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

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

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

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-15

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 获取标签的那些事 之 动态集合

    HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

    HTML5学堂
  • 新浪面试真题

    1.请写出一张图片的HTML代码,已知道图片地址为“images/abc.jpg”,宽100px,高50px 2.请问display:none和visibili...

    HTML5学堂
  • 移动端 模拟手机联系人触摸A~Z导航

    HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类...

    HTML5学堂
  • 从Oracle到MySQL,金融核心场景在线换库落地实战

    大家好,我是陆金所数据库团队的负责人王英杰。这次的分享主要集中在陆金所去O在线换库的技术特点上,之后详细给大家剖析陆金所设计的在线换库方案以及方案如何在一个庞大...

    jeanron100
  • 6.如何为Hue配置OpenLDAP认证

    在前面的文章Fayson讲了《1.如何在CentOS6.5安装OpenLDAP并配置客户端》、《2.OpenLDAP集成SSH登录并使用SSSD同步用户》、《3...

    Fayson
  • Mybatis分页插件PageHelper的使用详解

    如果你也在用Mybatis,建议尝试该分页插件,个人感觉这个是最方便,超好用的分页插件。 该插件目前支持Oracle,Mysql,MariaDB,SQLite...

    麦克劳林
  • JS滚动条触底加载更多

    https://codepen.io/klren0312/full/dybgayL

    治电小白菜
  • 【产品新闻】智能钛官方社区正式上线!携手开发者,让AI触手可及!

    7月10日,备受期待的腾讯智能钛AI开发者社区正式上线。一个以智能钛系列产品为基础,以机器学习、深度学习、人工智能为讨论主题,与开发者携手同行,让AI触手可及为...

    腾讯智能钛AI开发者
  • abp_vue导入导出excel

    后端abp,前端vue导入excel,开始准备用直接用npoi,觉得要写太多的代码,就算从以前的复制粘贴也麻烦,所以偷懒直接用别人的轮子 Magicodes....

    用户6362579
  • 持续测试,商业价值是什么?

    考虑到SDLC每个阶段的业务期望,持续测试提供了对风险的定量评估,以及在SDLC的下一阶段进行之前帮助降低这些风险的可操作任务。目标是消除无意义的测试,并产生真...

    程序你好

扫码关注云+社区

领取腾讯云代金券