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

width

控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height

和 width 相对应,指定高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.

<meta name="viewport" content="target-densitydpi=device-dpi" />

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例:

(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)

 <meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)

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

在iPhone 手机上默认值是(电话号码显示为拨号的超链接):

<meta name="format-detection" content="telephone=yes"/>

可将telephone=no,则手机号码不被显示为拨号链接

<meta name="format-detection" content="telephone=no"/>

三、<meta name="apple-mobile-web-app-capable" content="yes" />

说明:网站开启对web app程序的支持。

四、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明:

  • 在web app应用下状态条(屏幕顶部条)的颜色;
  • 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。

<meta http-equiv="Pragma" content="no-cache">

mate viewport的更多相关文章

  1. 【转】关于 mate viewport属性的具体说明!

    什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页 ...

  2. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  3. 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

     1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...

  4. <mate name="viewport">移动端设置详解

    <meta name="viewport" content="width=device-width,height=device-height,initial-sca ...

  5. 浅谈viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  6. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

  7. 浅谈移动端三大viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  8. Html mate标签的常见功能

    一.常用的功能 1.禁止屏幕缩放 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us ...

  9. CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...

随机推荐

  1. 【extjs6学习笔记】1.16 初始: 关于主题

    打开app.json,里面有主题设置 主题说明 theme-base 这个包是所有其他主题的基础主题,是唯一没有父主题的主题. 它包含Ext JS组件和布局正常工作绝对必需的最低限度的一组CSS规则. ...

  2. Linux uart程序

    我用的是jetson tx1 开发板 都是linux系统出了串口文件可能不同其他的没有什么不同都能用. 我安装的是qt5 新建一个none  qt c工程,用c 语言开发 期间调试了两天结果还是发送和 ...

  3. COGS 1043. [Clover S2] Freda的迷宫

    ★   输入文件:mazea.in   输出文件:mazea.out   简单对比时间限制:1 s   内存限制:128 MB Freda 的迷宫 (mazea.pas/.c/.cpp) 题目叙述 F ...

  4. Mac终端下使用***

    首先安装proxychains: brew install proxychains-ng 然后创建文件~/.proxychains/proxychains.conf,写入以下内容: strict_ch ...

  5. find - 递归地在层次目录中处理文件

    总览 SYNOPSIS find [path...] [expression] 描述 DESCRIPTION 这个文档是GNU版本 find 命令的使用手册. find 搜索目录树上的每一个文件名,它 ...

  6. datetime 插件

    1  写一段文本 <div id="nomarl-wrap"> <div class="form-group"> <label c ...

  7. Bootstrap 弹出框(Popover)插件

    Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...

  8. Bootstrap 提示工具(Tooltip)插件的事件

    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...

  9. C#自增运算符(++)

    一.C#自增运算符(++) 自增运算符(++)是将操作数加1. 1. 前缀自增运算符 前缀自增运算符是“先加1,后使用”.它的运算结果是操作数加1之后的值. 例如: ++x;  // 前缀自增运算符 ...

  10. java基础面试题:java中实现多态的机制是什么?

    靠的是父类或接口的引用指向子类或实现类的对象, 调用的方法是内存中正在运行的那个对象的方法.