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. [Matlab]Upper Triangularization & Back Substitution代码

    用来做数值计算作业的代码,来自Numerical Methods Using Matlab (4th Edition) [John H. Mathews, Kurtis K. Fink],改了一下注释 ...

  2. Python2中input()、raw_input()和Python3中input()

    听了ALEX的某节课,说input()和raw_input()函数在Python2中没有区别,现在来探讨一下Python2中的input().raw_input()函数和Pyhont3中的input( ...

  3. Linux的权限对于文件与目录的意义

    权限对文件: r:可读取此文件的实际内容. w:可以编辑.新增或者是修改该文件的内容(但不含删除该文件),如果没有r权限,无法w. x :该文件具有被系统执行的权限.可以删除. 权限对目录: r:re ...

  4. lr_get_transaction_duration 函数介绍

    lr_get_transaction_duration 用于获取事务所消耗的时间. 实例: Action() { double trans_time; //定义变量 web_url("www ...

  5. Python爬虫笔记（一）

    个人笔记,仅适合个人使用(大部分摘抄自python修行路) 1.爬虫Response的内容 便是所要获取的页面内容,类型可能是HTML,Json(json数据处理链接)字符串,二进制数据(图片或者视频 ...

  6. thinkphp5.0生命周期

    本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...

  7. 洛谷P3919 【模板】可持久化数组 [主席树]

    题目传送门 可持久化数组 题目描述 如题,你需要维护这样的一个长度为 $N$ 的数组,支持如下几种操作 在某个历史版本上修改某一个位置上的值 访问某个历史版本上的某一位置的值 此外,每进行一次操作(对 ...

  8. 深度学习基础系列（二）| 常见的Top-1和Top-5有什么区别？

    在深度学习过程中,会经常看见各成熟网络模型在ImageNet上的Top-1准确率和Top-5准确率的介绍,如下图所示: 那Top-1 Accuracy和Top-5 Accuracy是指什么呢?区别在哪 ...

  9. MySQL 5.7 安装完成后，首次登陆的几个问题

    Server:CentOS 7.0 MySQL : 5.7.20 MySQL Community Server (GPL) 1.首次登陆后修改密码: 根据安装时的选择不同,有mysqld_safe用m ...

  10. Xamarin 2017.9.13发布更新

     Xamarin 2017.9.13发布更新 Visual Studio 2017更新到15.3.4.其中,Xamarin.Visual更新到4.6.3.4;Xamarin.iOS更新到10.12.3 ...