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. [实战]MVC5+EF6+MySql企业网盘实战(21)——网盘操作日志

    写在前面 上篇文章介绍了一个bootstrap的分页插件,这篇将弄一个完整的例子,就以日志分页为例说明如何请求服务端然后进行分页. 系列文章 [EF]vs15+ef6+mysql code first ...

  2. 【洛谷】P4585 [FJOI2015]火星商店问题

    题解 题目太丧,OJ太没有良心,我永远喜欢LOJ! (TLE报成RE,垃圾洛谷,我永远喜欢LOJ) 好的,平复一下我debug了一上午崩溃的心态= =,写一写这道题的题解 把所有限制去掉,给出一个值, ...

  3. 如何使用Bootstrap4显示和隐藏元素

    如何使用Bootstrap4显示和隐藏元素 为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素.避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素. 要隐藏元素,只需使 ...

  4. c#多线程实现函数同步运行

    我们假设有方法run1()和run2(),耗时都比较大,实现他们同步运行将大大提高程序的效率,在这里考虑使用多线程的方法. 首先添加引用,定义bool型i,j为false. using System. ...

  5. 洛谷——P2393 yyy loves Maths II

    P2393 yyy loves Maths II 题目背景 上次蒟蒻redbag可把yyy气坏了,yyy说他只是小学生,蒟蒻redbag这次不坑他了. 题目描述 redbag给了yyy很多个数,要yy ...

  6. javascript的优缺点和内置对象

    1)优点:简单易用,与Java有类似的语法,可以使用任何文本编辑工具编写,只需要浏览器就可执行程序,并且事先不用编译,逐行执行,无需进行严格的变量声明,而且内置大量现成对象,编写少量程序可以完成目标: ...

  7. Xcode代码提示里的字母含义

    P -- 协议 M -- 成员方法 C -- 类 K -- 枚举 .常量 V -- 成员变量 T -- typedef类型 G -- 全局变量 f -- 函数 # -- #define指令

  8. [BZOJ4627][BeiJing2016]回转寿司(线段树)

    从左到右处理,设到当前数R的前缀和为cnt[i],则以i为右端点的合法的区间左端点j必然是L<=cnt[i]-cnt[j-1]<=R,即cnt[i]-R<=cnt[j-1]<= ...

  9. 【lct】bzoj2002 [Hnoi2010]Bounce 弹飞绵羊

    lct板子,此题主要有cut操作和link操作. #include<cstdio> #include<iostream> #include<cstring> #in ...

  10. 利用dll加载漏洞实现远程代码执行

    微软的“不安全dll加载”漏洞涉及Windows XP至Windows 7等多个版本的操作系统.由于Windows存在加载未指明完整路径的dll文件的机制,可能导致用户在使用第三方软件.玩游戏.听音乐 ...