asp.net 页面的Meta元素
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
WebApp 的 meta 标签
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
apple-mobile-web-app-capable
设置Web应用是否以全屏模式运行。
- 语法:
- <meta name="apple-mobile-web-app-capable" content="yes">
- 说明:
- 如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
- 兼容性:
- iOS 2.1 +
apple-mobile-web-app-status-bar-style
设置Web App的状态栏(屏幕顶部栏)的样式
- 语法:
- <meta name="apple-mobile-web-app-status-bar-style" content="blank">
- 说明:
-
除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。
- 兼容性
- iOS 2.1 +
format-detection
启动或禁用自动识别页面中的电话号码。
- 语法:
- <meta name="format-detection" content="telephone=no">
- 说明:
- 默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
- 兼容性
- iOS 1.0 +
viewport
- 语法:
- <meta name="viewport" content="width=230,initial-scale=2.3,user-scalable=no">
- 说明:
-
使用viewport meta标签可以提升页面在设备上的表现效果,典型地,你可以设置视口(viewport)的宽度和初始缩放比例。
举个例子来说,如果页面的宽度小于980px,你可以设置视口的宽度以适应页面。如果你正在开发一款Web应用,你应该设置视口的宽度为设备的宽度。
表 1 描述了viewport meta标签支持的属性以及它们的默认值。当有多个属性时,应该使用逗号分隔赋值表达式。设置多个属性时请遵循以下规则:
- 不要使用分号作为分隔符。
- 空格也可以作为分隔符,但最好使用逗号。
- 对于属性值是数字的属性,如果属性值包含了非数字字符但是以数字开头,那么只有数字的部分被当做属性值。例如,1.0x等价于1.0,123x456等价于123。如果参数不以数字开头,则属性值为0。
当要用到设备的尺寸数据时,你可以使用表2中的常量替代数字值。例如,使用device-width替代320(宽度),用device-height替代480(高度)。
你不需要设置每一个属性,未设置的属性会自动采用默认值。
设置视口的宽度为设备的宽度:
<meta name="viewport" content="width=device-width">
设置初始缩放比例为1.0:
<meta name="viewport" content="initial-scale=1.0">
设置初始缩放比例,同时禁止用户缩放。
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
- 兼容性
- iOS 1.0 +
属性 | 描述 |
---|---|
width | 视口的宽度。默认值是980,取值范围是200至10000,也可以取值为常量device-width。 |
height | 视口的高度。默认值是根据width的值和设备的宽高比来计算,取值范围是223至10000,也可以取值为常量device-height。 |
initial-scale | 视口的初始缩放比例。默认值取决于页面充满屏幕的缩放比例,取值范围取决于minimum-scale和maximum-scale。 |
minimum-scale | 视口的最小缩放比例。默认值是0.25,取值范围是>0至10.0。 |
maximum-scale | 视口的最大缩放比例。默认值是5.0,取值范围是>0至10.0。 |
user-scable | 设置用户是否可以缩放视口。yes表示可以,no表示不能,默认值是yes。设置user-scable为no可以防止当用户在input标签的文本域中输入文本时页面发生滚动。 |
属性值 | 描述 |
---|---|
device-width | 设备的宽度(像素)。 |
device-height | 设备的高度(像素)。 |
asp.net 页面的Meta元素的更多相关文章
- 获取父页面的dom元素
$("li.jericho_tabs", window.top.document); 上面的代码意思是获取父页面的li元素,class为jericho_tabs的所有元素.
- js操作控制iframe页面的dom元素
1.代码1 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- HTML控件ID和NAME属性的区别,以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值
在html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号. name是用来提交数据的,提供给表单用,可以重复: id则针对文档操作时候用,不能重复.如:document ...
- 手机页面的meta标签
<meta charset="utf-8"/><meta name="viewport" content="width=device ...
- 子页面调整父亲页面的iframe元素
$('iframe', parent.document).attr('scrolling','no');
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- html页面的head标签下
head区是指首页html代码的<head>和</head>之间的内容. 必须加入的标签 1.公司版权注释 <!--- the site is designed b ...
- 网页页头meta详解(科普知识)
1.Content-Type和Content-Language (显示字符集的设定) 说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内 ...
随机推荐
- magic_quotes_gpc
ini里面有这个magic_quotes_gpc设置,是为了防止忘记处理而和mysql有冲突,引起mysql的风险,于是,认为的加上\slash,但是我们在Php中获得值的时候,需要判断如果这个值为1 ...
- Xcode7 创建HTTP请求报错
最近在Xcode 7中向服务器发送请求访问JSON数据时, 控制台打印了以下错误信息: Application Transport Security has blocked a cleartext H ...
- OpenBSD为何还在用CVS之感
一个轻松无聊的晚上突然想到一个问题——在当今这个Git大红大紫的时代,OpenBSD为何还在用CVS代码仓库?连他同阵营的FreeBSD都已经改用SVN,宣布逐渐废掉CVS了……问了下google,搜 ...
- ABAP认识
ABAP是一种高级企业应用编程语言(Advanced Business Application Programming),起源于20世纪80年代.经过不断的发展,现在的版本为ABAP/4,SAP R/ ...
- 用Gen8服务器来学习虚拟化ESXI
虚拟化和云计算是这几年的热门技术,VMware公司是虚拟化的领头羊,小坦克我有幸在VMware从事这方面的测试工作. 本系列将会讲述我学习虚拟化的一些经历. 将会覆盖一些虚拟化产品: 比如:VMwar ...
- 使用Maven构建RichFaces 4.x项目
使用Maven构建RichFaces 4.x项目 目录 开始之前 第一步 - 创建Maven项目 第二布 - 添加依赖文件 第三步 - 配置RichFaces 第四步 - 创建显示页面 开始之前 本文 ...
- 计算机网络(1)-----网络层IP协议概述
网络层(Network Layer) 概念 网络层是OSI参考模型中的第三层,介于传输层和数据链路层之间,它在数据链路层提供的两个相邻端点之间的数据帧的传送功能上,进一步管理网络中的数据通信,将数据设 ...
- [vijos P1391] 想越狱的小杉
考前最后一题,竟然是第一次码SPFA,虽然这个算法早有耳闻,甚至在闻所未闻之前自己有过一个类似的想法,说白了就是广搜啊,但是敲起来还是第一次啊,而且这还不是真正意义上的SPFA. 完全按照自己想法来码 ...
- 1-5Tomcat 目录结构 和 web项目目录结构
对应我的安装路径: web项目目录结构
- iMacros 教程
imacros能记录你在网页中的动作,然后模拟你的动作自动重复执行.进阶应用主要在于两个方面: 1.用JS动态调用,重复执行之. 2.调用CSV文件,这个不错哦. 还可以调用数据库,这个没用过. 安装 ...