首页 > 编程 > HTML > 正文

移动端专用的meta标签设置大全

2019-10-26 17:20:57
字体:
来源:转载
供稿:网友

前言

之前学习前端中,对meta标签的了解仅仅只是这一句。

<meta charset="UTF-8">

但是打开任意的网站,其head标签内都有一列的meta标签。比如我们武林站长站网站,但是自己却很不熟悉,于是把meta标签加入了学习计划的最前方。

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

这个用的最多,width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。

所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。

下面还真用得少

devicePixelRatio

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips

fit-to-screen网站自适应屏幕

如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放

如果content的值大于screen width;fit-to-screen将开启

苹果浏览器相关

2015-07-08

<meta name=”viewport” content=”minimal-ui”>

在iOS 7.1的Safari中为meta标签新增minimal-ui属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

<meta name=”apple-mobile-web-app-capable” content=”yes”>

是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏

<meta name=”apple-touch-fullscreen” content=”yes”>

开启对web app程序的支持

<meta name=”format-detection” content=”telephone=no”><meta name=”format-detection” content=”email=no” />
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表