网页手机wap2.0网页的head里加入下面这条元标签，在移动端的浏览器中页面将以原始大小显示，并不允许缩放。

加入 如下代码 即可自适应移动端的屏幕：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

其中：

　　　　　　   width :控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）

　　　　　　  height :和width相对应，指定高度　

　　　　 initial-scale :初始缩放比例，页面第一次加载时的缩放比例

　　maximum-scale :允许用户缩放到的最大比例，范围从0到10.0

　　 minimum-scale :允许用户缩放到的最小比例，范围从0到10.0

　      user-scalable :用户是否可以手动缩放，值可以是：yes/true允许用户缩放；no/false不允许用户缩放

HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>的更多相关文章

  1. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  2. 移动端网页开发 meta 之 viewport

    这几天在搞微信公众平台,涉及到几个页面要写,可是当我测试时发现和想象中不太一样,于是去找了几个页面看了下,发现他们页面头部有 meta viewport 的标签,所以去找了下网上的资料,发现千篇一律, ...

  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">的说明

    今天在做适配手机版时,chrome调到手机版,但是还是显示PC端的样式,无法展现出手机端的样式: 开始的时候还以为是chrome版本的问题,最新版本的chrome62.0是有很多变化的,而之前工作中使 ...

  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">理解

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

  5. 关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释

    对于移动开发来讲,我还不太熟悉.今天在github上荡了一个系统源码,进行分析.发现其中有这样一段话: <meta name="viewport" content=" ...

  6. 论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...

  7. <meta name="viewport" content="width=device-width, initial-scale=1" />

    今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得 ...

  8. [HTML] <meta name="viewport" content="width=device-width,initial-scale=1.0">释义

    <meta name="viewport" content="width=device-width,initial-scale=1.0">这是 HT ...

  9. <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">的作用

    本人对该标签理解不深,这里是复制了穆乙的文章:如果有人进来看到这篇文章,请按此https://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.ht ...

随机推荐

  1. JavaScript当中的eval函数

    eval函数 eval函数接收一个由JavaScript语句组成的字符串,并且返回字符串中最后一条语句的返回值,如果最后一条语句没有返回值,那么eval函数返回undefined.如果传递给eval函 ...

  2. PHP函数参数的引用传递和值传递

    函数的参数传递有两种方式 1,值传递 常见的 test($param)  方式就是值传递,在函数内部修改$param,不会影响外部变量$param的值 2,引用传递 参数是引用传递的方式,此时函数内部 ...

  3. 转：Linux中find命令-path -prune用法详解

    在Windows中可以在某些路径中查找文件,也可以设定不在某些路径中查找文件,下面用Linux中的find的命令结合其-path -prune参数来看看在Linux中怎么实现此功能. 假如在当前目录下 ...

  4. [原]用C#模拟实现扑克牌发牌、排序程序…

    (1)52张扑克牌,四种花色(红桃.黑桃.方块和梅花),随机发牌给四个人. (2)最后将四个人的扑克牌包括花色打印在控制台上. 其中:     花色和点数用枚举类型实现     每张扑克牌用结构实 ...

  5. python之安装

    1.python控制软件pyenv 依赖软件:git [root@localhost ~]# curl https://raw.github.com/yyuu/pyenv-installer/mast ...

  6. 【4】项目结构+基本的Tornado服务

    项目地址: Blog 简单的tornado服务分支: simple 项目结构 创建对应的文件夹并测试一个最简单的功能 main.py #!/usr/bin/env python # coding:ut ...

  7. 创建简单的ajax对象

    oAjax=               oAjax=                     oAjax.open('GET', url,                               ...

  8. Oracle的几种索引

    Oracle 提供了多种不同类型的索引以供使用.简单地说, Oracle 中包括如下索引: 1. B* 树索引 这些是我所说的 “ 传统 “ 索引.到目前为止,这是 Oracle 和大多数其他数据库中 ...

  9. Delphi中的异常处理（10种异常来源、处理、精确处理）

    一.异常的来源 在Delphi应用程序中,下列的情况都比较有可能产生异常. 1.文件处理 2.内存分配 3.windows资源 4.运行时创建对象和窗体 5.硬件和操作系统冲突 6.网络问题 7.数据 ...

  10. HttpContext请求上下文对象

    一.HttpContext概述 HttpContext基于HttpApplication的处理管道,由于HttpContext对象贯穿整个处理过程,所以,可以从HttpApplication处理管道的 ...