移动端视口格式化备注

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,则状态栏正常显示。如果设置为black,则状态栏会有一个黑色的背景。如果设置为black-translucent,则状态栏显示为黑色半透明。如果设置为default或black,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。

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 +

时间: 2024-10-17 07:26:56

移动端视口格式化备注的相关文章

07-移动端开发教程-移动端视口

老马初始学习视口的概念的时候,看了很多的文章,看来很多的资料,鲜有人能把这个东西讲的非常透彻的.老马接下来就从初学者能看懂的角度去讲解视口和适配的方案. 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度.比如:iphone6/7是4.7寸,iphone6/7p是5.5寸. 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0i

CentOS Rsync服务端与Windows cwRsync客户端实现数据同步

CentOS Rsync服务端与Windows cwRsync客户端实现数据同步 2012年05月06日 ? Rsync ? 暂无评论 ? 被围观 3,622次+ 说明: 1.Rsync服务端 系统:CentOS 5.5 IP地址:192.168.21.160 数据存放目录:/data/osyunwei 2.cwRsync客户端 系统:Windows Server 2003 IP地址:192.168.21.130 同步的目录:D:\osyunwei 实现目的: cwRsync客户端每天凌晨3:0

移动端导学

移动端使用的模拟器 什么是视口(viewpoint) pc端视口的宽度和浏览器的宽度一样 布局视口:将pc页面直接搬到移动端,视口宽度与浏览器宽度不关联,完全独立,甚至远大于屏幕的宽度(普遍用法) 视觉视口:视觉视口与设备屏幕一样宽,通过用户的缩放而改变 理想视口:让用户拥有最理想的浏览和阅读,用户进入页面不需要再缩放来观看(<meta name="viewport" content="width=device-width, user-scalable=no, init

OTNM2000 Server端安装

OTNM2000 Server端安装安装备注:通信行业 原文地址:http://blog.51cto.com/vbers/2112998

响应式布局和移动端开发

响应式布局 l 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容 多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. l 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移 动设备的普及,越来越多的设计师采用这个技术. l 一个典型的响应式布局网站:http://www.16ketang.com/ l 试着逐渐缩小该页面的窗口,看看网页有什么变化 l 由于响应式布局要针对

pc视口

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 // 1. 获取物理像素 10 let screenWidth = window.screen.width; 11 le

移动web

1. 移动web与电脑端web1.1 两者布局的区别1.1.1 电脑端web在做电脑端页面布局时,给页面设置的常为固定的长和宽,为的是页面不会因为不同分辨率和不同浏览器发生页面布局的错位.现在我们也能通过给父盒子设置display:flex;来实现弹性布局,可以通过只对父盒子设置宽高,实现盒子内部的布局不会因为浏览器大小而发生布局改变.1.1.2 移动web移动web的开发就和电脑端有着明显的区别,原因移动端的可视区域大小明显比电脑端小,并且可视区域的大小有许多种类,无法固定一种大小来设置页面,

GlusterFS安装与配置

操作系统: CentOS6.4GlusterFS: 3.4.2测试工具:atop, iperf, iozone, fio, postmark 配置规划 下载并安装 1.下载地址:http://bits.gluster.org/pub/gluster/glusterfs/3.4.2/x86_64/需要下载的rpm包2.RPM安装包glusterfs-3.4.2-1.el6.x86_64.rpmglusterfs-api-3.4.2-1.el6.x86_64.rpmglusterfs-cli-3.4

压力测试 rsync+sersync

本次测试的说明: 测试用户写入的数据和实时同步数据之间的差别或者说延迟,本次实验实在虚拟机上完成,仅供自己学习测试专用 1.测试图解 2.测试环境: 3.基本说明 M-SERVER10.0.0.181端的三个文件夹 [[email protected] ~]# tree  /data0 /data0 └── www ├── bbs ├── blog └── www 4 directories, 0 files [[email protected] ~]# S1-SERVER10.0.0.182端