html5中viewport与meta详解

网上解释
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

属性详解:

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放(一定要禁止)

2、禁止将数字变为电话号码(必须取消这个):

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

作用:一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,并且点击这个数字还会自动拨号!即使不加也是会默认显示为电话的。如果是要开启的效果,这个meta就不用写了,默认开启的。

3、iphone设备中的safari私有meta标签:

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

作用:允许全屏模式浏览,删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

4、iphone的私有标签:

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

作用:指定iphone中顶端的状态栏显示样式。默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

5、创建桌面图标和启动画面,指定它的值可以使得你的网页在保存至主屏时,其图标显示为自定义的icon,而不是网页的缩略图

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

文件名设置为 apple-touch-icon 或 apple-touch-icon-precomposed ,前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层,后者则不会添加这些效果。

6、给网页声明启动画面,类似原生app。但是被声明的图片对于iphone和itouch 大小只能是 320 x 460 ,其他大小的都无效。但是可以通过sizes 来进行多设备适配。

<link rel="apple-touch-startup-image" href="/startup.png">
//for iphone Retina Display high
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
//for iPad Landscape
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
//for iPad Portrait
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

调试:

在浏览器调试+真机测试,

火狐的测试工具:按shift+ctrl+M进行查看。

时间: 2024-12-28 21:49:53

html5中viewport与meta详解的相关文章

HTML5 中的Nav元素详解

什么是Nav元素 Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要的.基本的.重要的放在nav元素里面即可. 比如说页脚底部如果有个版权申明,我们就不建议使用nav元素,而是使用footer元素是最合适的.一个页面中我们可用多个nav元素作为整体或者不同部分的导航 nav元素的用法 <body> <h1>nav的使用方法</h1> <

Django 【第二十六】Django model中的 class Meta 详解

class Foo(models.Model): bar = models.CharField(maxlength=30) class Meta: # ... Model 元数据就是 "不是一个字段的任何数据" -- 比如排序选项, admin 选项等等. 下面是所有可能用到的 Meta 选项. 没有一个选项是必需的. 是否添加 class Meta 到你的 model 完全是可选的. app_label app_label这个选项只在一种情况下使用,就是你的模型类不在默认的应用程序包

Django model 中的 class Meta 详解

class Foo(models.Model): bar = models.CharField(maxlength=30) class Meta: # ... Model 元数据就是 "不是一个字段的任何数据" -- 比如排序选项, admin 选项等等. 下面是所有可能用到的 Meta 选项. 没有一个选项是必需的. 是否添加 class Meta 到你的 model 完全是可选的. app_label app_label这个选项只在一种情况下使用,就是你的模型类不在默认的应用程序包

Django model中的 class Meta 详解

class Foo(models.Model): bar = models.CharField(maxlength=30) class Meta: # ... Model 元数据就是 "不是一个字段的任何数据" -- 比如排序选项, admin 选项等等. 下面是所有可能用到的 Meta 选项. 没有一个选项是必需的. 是否添加 class Meta 到你的 model 完全是可选的. app_label app_label这个选项只在一种情况下使用,就是你的模型类不在默认的应用程序包

html中的meta详解

1  name=viewport <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 1.width :控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素) 2.height :

图像处理中的数学原理详解17——卷积定理及其证明

欢迎关注我的博客专栏"图像处理中的数学原理详解" 全文目录请见 图像处理中的数学原理详解(总纲) http://blog.csdn.net/baimafujinji/article/details/48467225 图像处理中的数学原理详解(已发布的部分链接整理) http://blog.csdn.net/baimafujinji/article/details/48751037 1.4.5   卷积定理及其证明 卷积定理是傅立叶变换满足的一个重要性质.卷积定理指出,函数卷积的傅立叶变

iOS中UIWebView的使用详解

iOS中UIWebView的使用详解 一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的,例如我加载百度的主页:     UIWebView * view = [[UIWebView al

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

delphi中的Format函数详解

首先看它的声明:[[email protected]][@21ki!] function Format(const Format: string; const Args: array of const): string; overload;[[email protected]][@21ki!] 事实上Format方法有两种形式,另外一种是三个参数的,主要区别在于它是线程安全的,[[email protected]][@21ki!]但并不多用,所以这里只对第一个介绍:[[email protect