<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. 使用tooltip显示jquery.validate.unobtrusive验证信息

    通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...

  2. sql server 2016新特性 查询存储(Query Store)的性能影响

    前段时间给客户处理性能问题,遇到一个新问题, 客户的架构用的是 alwayson ,并且硬件用的是4路96核心,内存1T ,全固态闪存盘,sql server 2016 . 问题  描述 客户经常出现 ...

  3. C语言——字符串长度的计算方法

    1.不带转义字符的字符串 如:“abc!x=/”,其长度为7 2.带转义字符的字符串 (1) 字符串“abc\n”:其中的'\n'为转义字符(换行符),计算字符串长度时只能计作一个字符,所以该字符串的 ...

  4. GetIPAddress——获得本地IP地址信息

    1.gethostname()需要初始化套接字库 加载#pragma comment(lib,"ws2_32.lib"),和WSAStartup(MAKEWORD(2,2),&am ...

  5. python资料汇总

    http://www.cnblogs.com/vamei/archive/2012/09/13/2682778.html

  6. linux 命令——56 netstat(转)

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  7. js中随机数获取

    // 结果为0-1间的一个随机数(包括0,不包括1) var randomNum1 = Math.random(); //console.log(randomNum1); // 函数结果为入参的整数部 ...

  8. Mybatis自查询递归查找子

    先看一下数据库 主键id,名称product_code,父parent,和kind 设计菜单类 setter,getter Dao public interface ProductMapper { L ...

  9. dataTable 自定义排序

    $("#id").DataTable({ aaSorting: [0, 'desc'], // 默认排序 aoColumnDefs: [ {
 "bSortable&qu ...

  10. spring data事务

    事务在spring data中的使用 1:事务一般在service层.因为一个service方法可能会多次调用不同的dao,为了保证事务的完整性,那么多次的dao都放到一个方法里面 2:读的时候可以不 ...