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

JavaScript之禅

共 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 工作流程及分支策略



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

点赞,关注,在看


浏览 112
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报