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. day2 购物商城

    购物商城 商品展示.价格 买,加入购物车 付款,钱不够.(减商品,充值)

  2. Windows 8.1 操作系统常用快捷键

    安装了 windows 8.1 有一段时间了,刚使用时有点儿不太习惯,后面知道了一些常用快捷键后,使用起来习惯多了.下面是一些常用的 Windows 8.1 快捷键: Ctrl + Tab: 访问所有 ...

  3. java 接口请求返回通用json

    public class BaseResponseBody { // 不能添加属性 仅做泛型使用 } public class ResponseBase<T extends BaseRespon ...

  4. Java多线程编程——volatile关键字

    (本篇主要内容摘自<Java多线程编程核心技术>) volatile关键字的主要作用是保证线程之间变量的可见性. package com.func; public class RunThr ...

  5. 关于字体剥离和精简工具 FontSubsetGUI 和 FontPruner 的比较。

    在 Unity 中制作游戏时对动态字体的剥离和精简是现在常用的手段,现在有两篇博客是大家阅读和参照较多的,分别是 如何精简Unity中使用的字体文件 和 FontPruner 字体精简工具.他们各自提 ...

  6. Linux-数据库1

    数据库介绍 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据库中的数据按一定的数学模型组织.描述和存储,具有较小的冗余,较高的数据独立性和易扩展性,并可为各种 ...

  7. maven-surefire-plugin插件

    https://sq.163yun.com/blog/article/173632756223238144 目前很多项目组的测试代码工程都是采用MAVEN+TESTNG的方式构造的. 因此测试代码pr ...

  8. UESTC 1330 柱爷与远古法阵【高斯消元】

    题目链接[http://acm.uestc.edu.cn/#/problem/show/1330] 题意:有一个长度为L(L <= 300)的长廊,有一人站在最左边,他要到最右边去,他每次可以走 ...

  9. 【BZOJ 3307】 3307: 雨天的尾巴 （线段树+树链剖分）

    3307: 雨天的尾巴 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 458  Solved: 210 Description N个点,形成一个树状结 ...

  10. android aar jar

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha aar 是  安卓 类库项目的 二进制发行包.  文件扩展名 是 aar 专家 mave ...