网页手机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. python-整理--pip whl命令

    如果要在windows系统上安装新的包,可以下载*.exe安装文件,双击下一步...,如果找不到exe的话. 在CMD中执行 pip install 安装包文件.whl 就可以安装了 pip这个命令本 ...

  2. PHP根据经纬度，计算2点之间的距离的2种方法

    计算地球表面2点之间的球面距离 /** * @param $lat1 * @param $lng1 * @param $lat2 * @param $lng2 * @return int */ fun ...

  3. Sublime 插件安装

    转http://www.cnblogs.com/Rising/p/3741116.html

  4. iOS开发多线程-多线程技术1

    一.基本概念 1.什么是进程 进程就是指在系统中正在运行的一个应用程序 每个应用之间是相互独立的 每个进程都运行在其专有的并且受保护的内存空间内. 2.什么是线程 一个进程想要执行程序,就必须需要一个 ...

  5. jquery实现二级联动

    闲来没事,写点jquery练练手. <!--json代码部分 新建文件liandong.json--> var pron_city = { '省':['all'], '北京':[ {'市' ...

  6. USB系列之三：从你的U盘里读出更多的内容

    U盘是我们最常使用的一种USB设备,本文继续使用DOSUSB做驱动,试图以读取扇区的方式读取你的U盘.本文可能涉及的协议可能会比较多. 一.了解你的U盘    首先我们用上一篇文章介绍的程序usbvi ...

  7. 利用SQL Profiler处理开销较大的查询

    当SQL Server的性能变差时,最可能发生的是以下两件事: 首先,某些查询产生了系统资源上很大的压力.这些查询影响整个系统的性能,因为服务器无法足够快速地服务其他SQL查询. 另外,开销较大的查询 ...

  8. jQuery之Jcrop

    头像裁剪是一个经常用到的功能,实现原理也较为简单,就是在本地选择好所需裁剪图片的坐标,将坐标发送到服务器,由服务器执行图片裁剪操作. jQuery插件Jcrop提供了强大的图片裁剪坐标选择插件.一下来 ...

  9. Wap touch flispan demo

    直接上代码了 仔细看看例子就会明白 简单实用 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8& ...

  10. UESTC_秋实大哥与小朋友 2015 UESTC Training for Data Structures<Problem A>

    A - 秋实大哥与小朋友 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Sub ...