移动端兼容系列 HTML与CSS兼容
时间:2022-05-04
本文章向大家介绍移动端兼容系列 HTML与CSS兼容,主要内容包括移动端兼容 - 取消电话号码识别、移动端兼容 - 取消电子邮箱识别、rem水平方向上的兼容问题、华为mete7内置浏览器上页面效果、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
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的选择,之前写过比较详细的文章,可以查看——>移动端页面的开发方法 - 系列
- C# Enum设计和使用的相关技巧
- 小程序如何利用更低成本获得高流量?
- 使用System.Net.Mail通过gmail发送电子邮件
- 删除 WordPress 导航菜单的多余 CSS 选择器(id或class)
- es6 对象的扩展
- 自定义WordPress 标签云小工具相关参数
- 检查.NET程序平台目标(Platform Target)工具CorFlags
- 哪些行业最适合抢驻小程序?
- WordPress 一键关闭/禁止页面评论功能
- 在一个.net sln中包含多个project,project引用同一个dll导致的错误
- Windows下安装MariaDB
- Quartz.net官方开发指南 第一课:使用Quartz.net
- Quartz.net官方开发指南 第二课:Jobs And Triggers
- 为你的WordPress 主题添加结构化数据/丰富文本摘要,高亮搜索结果(上)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- flutter ExpansionTile 层级菜单的实现
- Ubuntu下如何创建XFS文件系统的LVM详解
- 华为开源内部OpenJDK定制版:“毕昇 JDK 8”
- Linux定时任务Crontab命令使用详解与总结
- kotlin实现通知栏提醒功能示例代码
- Linux自动删除n天前日志及实例命令
- Flutter学习教程之Route跳转以及数据传递
- PHP实现限制域名访问的实现代码(本地验证)
- 吸引发烧友的视听Linux发行版
- Linux下完全删除用户的两种方法
- flutter实现轮播图效果
- Ubuntu 16.04设置PostgreSQL开机启动的方法
- 使用userdel命令删除Linux用户的教程详解
- Linux系统交换空间介绍
- 小内存服务器上宝塔默认安装的MySQL如何优化配置