1. 网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. width - viewport的宽度 height - viewport的高度
  4. initial-scale - 初始的缩放比例
  5. minimum-scale - 允许用户缩放到的最小比例
  6. maximum-scale - 允许用户缩放到的最大比例
  7. 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的更多相关文章

  1. HTML5 Viewport Meta Tag

    https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U ...

  2. Using the viewport meta tag to control layout on mobile browsers

    A typical mobile-optimized site contains something like the following: <meta name="viewport& ...

  3. [转]手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

  4. 豆知识扩展：HTML<meta> tag

    豆知识: HTML<meta> tag Metadata 是关于数据的信息. The <meta> tag provides metadata关于网页.Metadat不会显示在 ...

  5. 关于 viewport meta

    典型代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

  6. [转载]ViewPort <meta>标记

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用 ViewPort <meta>标记还表示文档针对移动 ...

  7. ViewPort <meta>标记

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...

  8. 什么是Viewport Meta（width详解）及在手机上的应用

    viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机 ...

  9. (转)Ratchet教程：meta与link标签

    原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签           ...

随机推荐

  1. 【DEV C++】 Error: ld returned 1 exit status

    一般出现“ld returned 1 exit status”错误都是由于函数名称拼写错误造成的,或者在一个工程中不同的函数使用了同一个函数名,暂时还未遇到其他情况.

  2. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

  3. 【LOJ】#2129. 「NOI2015」程序自动分析

    题解 开始是想两个并查集的 和A相等,和A不相等 如果AB相等就连 A 相等,B相等 B不相等 A不相等 如果AB不相等就连 A不相等,B相等 B相等,A不相等 但是显然不对,因为和A不相等的不一定和 ...

  4. VuGen录制选项Recording Options

  5. Python并发编程-管道

    管道的作用- 两个进程间传递消息 from multiprocessing import Pipe, Process def func(conn1,conn2): conn2.close() #子进程 ...

  6. 程序 查看 jvm版本

    System.getProperty("java.version")返回你所需要的.

  7. JAVA中关于大数问题

    这里只是java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. 一.样例:java中的输出a+b import java.io ...

  8. BZOJ 4276: [ONTAK2015]Bajtman i Okrągły Robin

    最大权值匹配,贪心匈牙利即可. 检查一些人是否能被全部抓住可以采用左端点排序,右端点优先队列处理. By:大奕哥 #include<bits/stdc++.h> using namespa ...

  9. POJ 3162 Walking Race 树形dp 优先队列

    http://poj.org/problem?id=3162 题意 :  一棵n个节点的树.wc爱跑步,跑n天,第i天从第i个节点开始跑步,每次跑到距第i个节点最远的那个节点(产生了n个距离),现在要 ...

  10. 【DLX算法】poj2676 Sudoku

    DLX算法求解精确覆盖问题模板.赛场上可以参见白书. #include<cstdio> #include<cstring> #include<vector> usi ...