移动端兼容系列 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 条评论
登录 后参与评论

相关文章

来自专栏ytkah

小程序页面可以放置转发按钮,同时开放了微信运动步数背景音乐播放等更多基础能力

  小程序页面可以放置转发按钮,同时开放了微信运动步数背景音乐播放等更多基础能力。小程序转发更简单了:小程序页面可以放置转发按钮。在小程序页面右上角“…”的转发...

2846
来自专栏腾讯大讲堂的专栏

微信应用号终于来了!它到底长什么样?看这篇就知道了

腾讯科技讯 (韩依民) 9月22日凌晨,微信公众平台开始陆续对外发送小程序内测邀请。小程序即被外界广为关注的微信“应用号”。 从内测邀请函透露的信息可以看出,...

2036
来自专栏全华班

微信应用号来了 APP开发者先别颤抖,看完再说说!

9月22日凌晨,微信公众平台开始陆续对外发送小程序内测邀请。小程序即被外界广为关注的微信“应用号”。 从内测邀请函透露的信息可以看出,小程序可以帮助开发者快速的...

3776
来自专栏Android 开发者

Material.io 重磅升级 | 中文字幕视频

2171
来自专栏我就是马云飞

如何度过前端开发的危机!

前端开发还是我们所熟悉的那个角色吗?还是说这个角色已经变得物是人非了?与自然界的进化相仿,“前端”的演变已经分裂成了几种不同的分支,而且在我看来这个身份出现了危...

812
来自专栏BestSDK

【作品赏析】简单、直观、明了,这就是最好的设计

用户界面设计对于一个电商网站的成功是至关重要的,相对而言,人们更愿意浏览简洁美观的网页,所以,好的界面设计能够为网站吸引更多用户人群。 这是一个以滑板为主的电商...

3387
来自专栏CDA数据分析师

数据挖掘的应用:如何选择商品关键词?

什么是搜索? 搜索就是根据用户输入关键词,下面显示搜索结果。从用户的角度来说,就是根据自己设想的词来找到想要的商品。而从卖家的角度来说,就是根据用户输入的关键...

2726
来自专栏人称T客

企业移动化未来混合模式占主流 HTML5天残无法统治全局

HTML5的重要性与日俱增,在可预见的未来也还会在许多用户案例中继续成为统治性的平台。企业架构师需要考虑将HTML5能力纳入其应用开发工具链当中,尤其是企业...

2545
来自专栏互联网数据官iCDO

大神赐教 | 如何不依靠内容和外链提高网站排名?

这与谷歌的算法更新无关,我发现,无需制造更多的内容或链接,有些技巧也可以持续地提高网页排名。

1142
来自专栏陈满iOS

iOS开发专题分类大全(简书iOS学习资源大收录!)

为了更好地将简书上面的iOS文章分类,以方便我们日后的集中式强化学习,这里整理了二十多个专题以供大家查阅!

2255

扫码关注云+社区