viewport Meta Tag
- 网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
- width - viewport的宽度 height - viewport的高度
- initial-scale - 初始的缩放比例
- minimum-scale - 允许用户缩放到的最小比例
- maximum-scale - 允许用户缩放到的最大比例
- user-scalable - 用户是否可以手动缩放
viewport Meta 标记
今天来说说viewport Meta标记。这个标记最开始是由苹果引进的,用来标记移动设备的浏览器的视口大小。现在,这个标记也已经被Android接受。不止如此,除了WebKit内核的浏览器,Mozilla也接受了这个标记。据说,HTML5也将正式引入这个标记。
在<head>中,写下以下代码
<meta name="viewport" content="width=device-width; user-scalable=0;" />
就可以让您的网页适应移动浏览器的大小。
视口,和ps中的画布比较相像。
下面解释一下viewport的meta标记中各个参数的具体意义。
width
视口的宽度。可以使用像素值,但推荐使用device-width关键字。表示依照设备屏幕的宽度。
height
视口的高度。不用指定。
user-scalable
用户是否可以缩放视口。
值可以是:
1, yes, or true: 允许用户缩放
0, no, or false: 不许用户缩放
initial-scale
初始缩放值。比如1.0表示一个视口像素等于一个屏幕像素。
minimum-scale
最小比例值。范围从0至10.0
maximum-scale
最大比例值。范围从0至10.0
viewport Meta Tag的更多相关文章
- HTML5 Viewport Meta Tag
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U ...
- Using the viewport meta tag to control layout on mobile browsers
A typical mobile-optimized site contains something like the following: <meta name="viewport& ...
- [转]手机web HTML头信息解释和viewport meta标签解释
<meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...
- 豆知识扩展:HTML<meta> tag
豆知识: HTML<meta> tag Metadata 是关于数据的信息. The <meta> tag provides metadata关于网页.Metadat不会显示在 ...
- 关于 viewport meta
典型代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
- [转载]ViewPort <meta>标记
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用 ViewPort <meta>标记还表示文档针对移动 ...
- ViewPort <meta>标记
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...
- 什么是Viewport Meta(width详解)及在手机上的应用
viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机 ...
- (转)Ratchet教程:meta与link标签
原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签 ...
随机推荐
- Fresco 获得Bitmap
ImageRequest imageRequest = ImageRequestBuilder .newBuilderWithSource( Uri.parse(getFeedItem(positio ...
- electron主进程引入自定义模块
对于electron以及nodejs开发,是一只小菜鸟,第一次想做个应用 只能边学边做,遇到各种各样的问题. 1.不想把所有的主进程函数放到一个文件中,这样文件比较乱,并且不好处理 想法:将另一个js ...
- spring_150807_hibernate_transaction_annotation
实体类: package com.spring.model; import javax.persistence.Entity; import javax.persistence.Id; import ...
- 【leetcode】 21. Merge Two Sorted Lists
题目描述: Merge two sorted linked lists and return it as a new list. The new list should be made by spli ...
- JAVA解析xml的四种方式比较
1)DOM解析 DOM是html和xml的应用程序接口(API),以层次结构(类似于树型)来组织节点和信息片段,映射XML文档的结构,允许获取 和操作文档的任意部分,是W3C的官方标准 [优点] ①允 ...
- NOIP2017 D1T1小凯的疑惑
这应该是近年来最坑的第一题了. 我第一眼看到这题上来就打表,数据范围告诉我复杂度应该是log级的,然而一个小时后才发现是一个输出结论. 设较小数是a 较大数是b 写出几组可以发现一个规律就是一旦出现连 ...
- [BZOJ4247]挂饰(DP)
当最终挂饰集合确定了,一定是先挂挂钩多的在挂挂钩少的. 于是按挂钩从大到小排序,然后就是简单的01背包. #include<cstdio> #include<algorithm> ...
- The 2016 ACMICPC Asia Beijing Regional Contest
A. Harmonic Matrix Counter (3/19) B. Binary Tree (1/14) C. Asa's Chess Problem (21/65) [ Problem ] 给 ...
- [CODE FESTIVAL 2018]Sushi Restaurant
题意:有$n$个人,对每个人,他有$p_i$的概率饥饿值为$x_i$($1\leq i\leq m$),你现在要做$n$盘寿司,每盘寿司有一定的数量,当这$n$个人的饥饿值确定后他们会自己选择最优的( ...
- 利用dll加载漏洞实现远程代码执行
微软的“不安全dll加载”漏洞涉及Windows XP至Windows 7等多个版本的操作系统.由于Windows存在加载未指明完整路径的dll文件的机制,可能导致用户在使用第三方软件.玩游戏.听音乐 ...