网页手机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. 在线添加磁盘，扩展LVM卷案例

    一.添加硬盘,在线扫描出来 首先到虚拟机那里添加一块硬盘,注意必须是SCSI类型的硬盘. 扫描硬盘,不用重启操作系统的. echo "- - -" > /sys/class/ ...

  2. [转]Cocos2d-x建工程时避免copy文件夹和库

    原文链接:  http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 在上一篇教程中,我们演示了如何使用VS2010来新建一个工程 ...

  3. Python学习(七) 流程控制if语句

    在Python中流程控制if语句采用如下格式: if expression : statement elif expression : statement elif expression : stat ...

  4. centos6.4x64安装vncserver

    参考文章:http://blog.csdn.net/mchdba/article/details/43058849 主要是远程安装oracle11g需要用到这个东西: 进入系统依次执行下列命令: #查 ...

  5. SRAM与SDRAM的比较（转）

    原文:http://blog.csdn.net/fg8181/article/details/2278100 内存在电脑中起着举足轻重的作用,一般采用半导体存储单元,包括随机存储器(RAM),只读存储 ...

  6. android android:textColor="@[package:]color/filename" ----Color/filename文字颜色selector状态列表

    文字颜色selector状态列表

  7. C# log Helper

    using System; using System.Collections.Generic; using System.Text; using System.Data.SqlClient; usin ...

  8. 国际化标签 <fmt:bundle>&<fmt:message>的使用

    国际化标签 <fmt:bundle>&<fmt:message>的使用 Message.properties文件: name=www.gis520.com #info= ...

  9. 服务器放在不同省份的IDC机房，数据如何同步？一个域名如何动态解析到不同IP的服务器

    服务器放在不同省份的IDC机房,数据如何同步?淘宝的做法是不同IDC机房之间拉光纤,异地容灾和性能无关,异地容灾是应对断电.地震这种不可抗拒因素的 同城分流,异地容灾 是什么意思?你比如说公司的业务涉 ...

  10. actionInvocation

    1.actionInvocation是什么 ActionInvocation就是Action的调用者.ActionInvocation在Action的执行过程中,负责Interceptor.Actio ...