网页手机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. Android网络连接的两种方法：apache client和httpurlconnection的比较

    另见http://blog.csdn.net/mingli198611/article/details/8766585 在官方blog中,android工程师谈到了如何去选择apache client ...

  2. ububru下 redmine安装教程

    1.安装之前确认你已经安装好了mysql 2.连接mysql创建数据库 mysql -u root –p CREATE DATABASE redmine CHARACTER SET utf8; CRE ...

  3. Hibernate配置属性

    Hibernate配置属性 属性名 用途 hibernate.dialect 一个Hibernate Dialect类名允许Hibernate针对特定的关系数据库生成优化的SQL. 取值 full.c ...

  4. bochs 2.6安装和使用

    1.安装 Ubuntu 10.04下编译安装Bochs 2.6及问题解决 安装 https://chaoyang.blog.ustc.edu.cn/index.php/archives/124 安装具 ...

  5. java 常用的验证方法帮助类

    import java.text.ParseException; import java.util.Collection; import java.util.Map; /** * 常用的验证方法帮助类 ...

  6. UVA_Rotation Game<旋转游戏> UVA 1343

    The rotation game uses a # shaped board, which can hold 24 pieces of square blocks (see Fig.1). The ...

  7. python连续爬取多个网页的图片分别保存到不同的文件夹

      python连续爬取多个网页的图片分别保存到不同的文件夹 作者:vpoet mail:vpoet_sir@163.com #coding:utf-8 import urllib import ur ...

  8. ZOJ3477&JAVA大数类

    转:http://blog.csdn.net/sunkun2013/article/details/11822927 import java.util.*; import java.math.BigI ...

  9. ※数据结构※→☆非线性结构（tree）☆============二叉树 顺序存储结构（tree binary sequence）（十九）

    二叉树 在计算机科学中,二叉树是每个结点最多有两个子树的有序树.通常子树的根被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用作二叉查找树和二叉堆或是 ...

  10. 运用 BoxLayout 进行 Swing 控件布局

    摘自http://www.cnblogs.com/fnlingnzb-learner/p/6008572.html 运用 BoxLayout 进行 Swing 控件布局 对于初学 Java Swing ...