移动端兼容系列 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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一名叫大蕉的程序员

浸入式大蕉Lab实训指南 No.106

现在呢,已经有11个小伙伴一起参与到校招Java训练实训的项目啦,大家可以一起参与进来,提你所想要的意见,比如说想练练算法啊,想练练具体的实战啊,想练练一些原理...

943
来自专栏lonelydawn的前端猿区

模块化管理系统

看过不少相关软件体系结构的书,理论随口道来,丝毫不成问题,然而第一次接触企业级架构,感触是非常大的。 所谓模块化, 模块化是指解决一个复杂问题时自顶向下逐层把系...

1857
来自专栏北京马哥教育

30分钟带你揭开运维自动化的面纱-Ansible业务自动化之路

本文由马哥教育运维部落~Ansible部落分享整理而来,Ansible原创翻译团队共同努力而得.Ansible最新消息可关注 http://www.178lin...

29110
来自专栏Java技术

Java开发成神之路高级视频分享

首先声明,这不是一篇广告贴,小编没有拿一毛钱的广告费,只是最近在网上找到这个比较有意思的公开课视频,内容讲的很不错,自己也看了一部分,收获很多,特此在这里分享给...

633
来自专栏柠檬先生

NEC 工程师规范

工程师规范 - 开发准备 了解产品和设计 参加需求、交互、视觉会议,了解产品设计和项目成员。 了解产品面向的设备和平台。 了解产品对兼容性的要求以及是否采用响应...

1708
来自专栏技术杂文

微服务:真正的架构模式

微服务的相关知识和它的神秘令我着迷。概念上的微服务就像是现代最有趣的流行架构之一。它足够功能强大,有着广泛的使用方法;也足够模糊,难以统一而论。

973
来自专栏ThoughtWorks

敏捷实践之Desk Check | TW洞见

今日洞见 文章作者来自ThoughtWorks:曲正平。图片来源于网络。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,...

2825
来自专栏知晓程序

厉害了!用这个小程序,不知不觉就能读完一本书

那什么才是阅读的正确打开方式呢?今天,知晓程序(微信号zxcx0101)推荐的「三言两鱼阅读」小程序,提供了一种独特的「对话流」阅读方式,让你不知不觉就能读完一...

863
来自专栏DevOps时代的专栏

如何落地全球最大 Kubernetes 生产集群

JDOS 就是京东数据中心操作系统,随着数据中心规模不断的扩大,我们需要对数据中心做综合的考虑。所以一开始就先说数据中心的层面,大家知道数据中心里面有服务器、网...

802
来自专栏架构师之路

互联网分层架构,为啥要前后端分离?

通用业务服务化之后,系统的典型后端结构如上: web-server通过RPC接口,从通用业务服务获取数据 biz-service通过RPC接口,从多个基础数据s...

3588

扫描关注云+社区