移动端浏览器常用的 meta 标签汇总

共 1660字,需浏览 4分钟

 ·

2021-12-10 17:20


点击上方蓝字关注我们,软件在能够复用前必须先能用。

本文是 meta 标签系列的最后一篇文章。本系列共 4 篇:

HTML meta 标签详解
将 Twitter Card 和 Open Graph 社交元数据添加到你的网页
8 个必知的 SEO 优化重要元标签
移动端浏览器常用的 meta 标签汇总【本文】

前面几篇文章,我们都已经介绍过了meta标签的方方面面。本文将介绍移动端及浏览器的一些常用meta标签

响应式设计视口标签

viewport 是用户网页的可视区域。viewport 通常用于设置页面的视口, 这个属性常用于设计移动端网页。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

它主要有以下属性值:

  • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度
  • height:和 width 相对应,指定高度
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
  • maximum-scale:允许用户缩放到的最大比例
  • minimum-scale:允许用户缩放到的最小比例
  • user-scalable:用户是否可以手动缩放

关闭自动识别

在IOS中,你的网页里有一串数字,IOS会把他当成电话号码,点击会拨打电话。通过使用下面这个标签可以取消这一功能。

1、关闭电话自动识别:


2、关闭邮箱自动识别:

如果同样也需要禁止自动识别邮箱,可以在原来的基础上增加"email=no"。


QQ 移动浏览器的一些设置

3、在指定方向上锁定屏幕(锁定横 / 竖屏)


4、全屏显示此页面


5、页面以"应用模式"显示


UC 移动浏览器的一些设置

6、在指定方向上锁定屏幕(锁定横 / 竖屏)


7、全屏显示页面


8、即使在"文本模式"下,UC 浏览器也会显示图片


9、页面将以"应用模式"显示(全屏、禁止手势等)


10、禁用 UC 浏览器的"夜间模式"


11、简化页面,减少数据传输


12、禁用的 UC 浏览器"当此页面中有较多文本时缩放字体"的功能


设置 360 浏览器的渲染引擎

13、选择渲染引擎



Apple iOS Safari 浏览器

添加到主屏幕

14、启动图标 (大于等于 180x180px)


15、启动屏幕图片


16、启动图标的标题


17、启用独立(全屏)模式, 删除苹果默认的工具栏和菜单栏


17、状态栏外观(除非启用独立模式,否则无效) 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)


Google Android

18、设置主题色


19、设置添加到主屏幕


Google Chrome

20、禁用翻译提示


微软 IE 浏览器

21、强制 IE 8/9/10 使用其最新的渲染引擎


22、通过 Skype Toolbar 浏览器扩展功能禁用自动检测和格式化可能的电话号码


23、Windows 磁贴


最低要求的的 browserconfig.xml 配置:












结语

以上介绍了一些在特定平台上,常用的meta标签。可用于简单的定义网页在浏览器及平台上的表现。


- END -


免费前端学习资源
扫码发送【资源】领取
JavaScript之禅


往期精彩回顾:

Javascript 数组及其方法详解

8个必知的 SEO 优化重要元标签

将 Twitter Cards 和 Open Graph 社交元数据添加到你的网页

HTML meta 标签详解

Curl 使用指南

JavaScript中到底要不要加分号?

RESTful API 设计最佳实践

Git 工作流程及分支策略



左手代码右手砖,抛砖引玉

点赞,关注,在看


浏览 127
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐