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. Hadoop（七）YARN的资源调度

    一.YARN 概述 YARN 是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式的操 作系统平台,而 MapReduce 等运算程序则相当于运行于操作系统之上的应用程序 YARN ...

  2. MQTT协议以及库函数说明

    内容简介:之前我们写了一篇ESP8266AT指令的说明文档,在客户端连接上服务器之后,接下来便是网络通信.为此我们又写了这一片MQTT协议的说明文档,更加深层次的讲述了通信的原理.此文档只是我们在调试 ...

  3. .Net使用Redis详解之ServiceStack.Redis

    序言 本篇从.Net如何接入Reis开始,直至.Net对Redis的各种操作,为了方便学习与做为文档的查看,我做一遍注释展现,其中会对list的阻塞功能和事务的运用做二个案例,进行记录学习. Redi ...

  4. oracle创建计划任务

    特别提示: oracle是执行完任务,才按照interval去计算下次执行时间!!! 为精确每个5分钟执行一个任务,必须自己计算时间. 如:trunc_minute(sysdate)+/ create ...

  5. Mybatis源码分析之插件的原理

    MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用. 默认情况下,可以使用插件来拦截的方法调用包括: Executor (update, query, flushStatements, ...

  6. mysql概念特性和优化

    概念特性 基础命令 连接 监控 优化 字段 索引 查询 共享锁(shared lock)和排它锁(exclusive lock) 也叫读锁(red lock)和写锁(write lock) 多版本并发 ...

  7. navicat for mysql 快捷键

    1.ctrl+q           打开查询窗口2.ctrl+/            注释sql语句3.ctrl+shift +/  解除注释4.ctrl+r           运行查询窗口的s ...

  8. Trie树入门

    Trie树入门 貌似很多人会认为\(Trie\)是字符串类型,但是这是数据结构!!!. 详情见度娘 下面开始进入正题. PS:本文章所有代码未经编译,有错误还请大家指出. 引入 先来看一个问题 ​ 给 ...

  9. 【BZOJ 2656】2656: [Zjoi2012]数列(sequence) （高精度）

    2656: [Zjoi2012]数列(sequence) Time Limit: 2 Sec  Memory Limit: 128 MBSubmit: 1499  Solved: 786 Descri ...

  10. CodeForces 606C Sorting Railway Cars（最长连续上升子序列）

    Description An infinitely long railway has a train consisting of n cars, numbered from 1 to n (the n ...