mate viewport
<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的更多相关文章
- 【转】关于 mate viewport属性的具体说明!
什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页 ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
- 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...
- <mate name="viewport">移动端设置详解
<meta name="viewport" content="width=device-width,height=device-height,initial-sca ...
- 浅谈viewport
我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...
- rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签
在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...
- 浅谈移动端三大viewport
我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...
- Html mate标签的常见功能
一.常用的功能 1.禁止屏幕缩放 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us ...
- CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口
CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...
随机推荐
- HDevEngine in .NET Applications MultiThreading
Basics To use HDevEngine in Visual Studio .NET, you must add a reference to the HALCON/.NET assembly ...
- [Java]在xp系统下java调用wmic命令获取窗口返回信息无反应(阻塞)的解决方案
背景:本人写了一段java代码,调用cmd命令“wmic ...”来获取系统cpu.mem.handle等资源信息.在win7操作系统下运行没有问题,在xp系统下却发现读取窗口反馈信息时无反应(阻塞) ...
- 解析ASPX网页__doPostBack分页的网页table数据
由于急于上线的功能要去客服系统里抓取数据进行验证,客服方面又没有时间开发EDI接口给到我,所以用了本办法:爬人家web系统上的数据进行分析. 由于客服的web系统用ASP.Net的__doPostBa ...
- .net密码找回
using System; using System.Collections.Generic; using System.Text; using System.Net.Mail; using Syst ...
- 使用CreateProcess函数运行其他程序
为了便于控制通过脚本运行的程序,可以使用win32process模块中的CreateProcess()函数创建一个运行相应程序的进程.其函数原型如下.CreateProcess(appName, co ...
- Command Line Client(建库,建表)
Enter password: ******Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection ...
- HTML5新特性 video '►'
var play = document.createElement('button') play.setAttribute('title','play') play.innerHTML = '►' 创 ...
- 【BZOJ2006】[NOI2010] 超级钢琴(堆+RMQ)
点此看题面 大致题意: 要你求出区间和前\(k\)大的区间的区间和之和,其中每个区间的大小在\(L\)与\(R\)之间. 堆+\(RMQ\) 这道题目,我们可以先对\(1\sim n\)中的每一个\( ...
- Java源码——HashMap的源码分析及原理学习记录
学习HashMap时,需要带着这几个问题去,会有很大的收获: 一.什么是哈希表 二.HashMap实现原理 三.为何HashMap的数组长度一定是2的次幂? 四.重写equals方法需同时重写hash ...
- c#树形结构
http://download.csdn.net/detail/rememberme001/6997235 http://bbs.csdn.net/topics/310094150 http://ww ...