网页手机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. （原+转）ubuntu中删除文件夹

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638030.html 参考网址: http://zhidao.baidu.com/link?url=A ...

  2. 层层递进Struts1（六）自定义转换器

    Struts提供的类型转换有限,如果我们强行使用没有的类型转换,则会出现错误,以Date类型为例: org.apache.catalina.core.StandardWrapperValve invo ...

  3. PHP基础示例:用PHP+Mysql编写简易新闻管理系统

    实现目标:使用php和mysql操作函数实现一个新闻信息的发布.浏览.修改和删除操作 实现步骤: 一.创建数据库和表 1.创建数据库和表:newsdb 2.创建表格:news 字段:新闻id,标题,关 ...

  4. 禁用谷歌字体解决WordPress访问速度过慢问题

    这几天打开网站的时候发现突然变慢了,一直等待加载fonts.googleapis.com,搜索了一下发现很多wordpress网站都出现了 这种现象,原来是因为今日谷歌全线退出中国,貌似谷歌.Gmai ...

  5. Typecho 代码阅读笔记（一） - 页面渲染及路由机制

    转载请注明出处:http://blog.csdn.net/jh_zzz 从 index.php 开始看, /** 初始化组件 */ Typecho_Widget:: widget('Widget_In ...

  6. RedHat下MySQL 5.6 安装、维护

    准备环境: RedHat 5系统.MySQL 5.6 rpm包 首先 上传mysql至服务器 1. 解压缩MySql [root@localhost]# tar -xvf MySQL-5.6.2_m5 ...

  7. 检测页面的localstorage剩余容量

    首先用了JSON.stringify(localStorage).length得出你当前页面的localstorage所使用的字符数量current_num. 然后你再去http://arty.nam ...

  8. IIC的标准操作函数集（C51）包含C和H文件

    /********************************************************************* 头文件名 VIIC_C51.H 这个头文件对应的库是VII ...

  9. mysql 存储过程 事务处理

    BEGIN ; ; START TRANSACTION; #这边放sql语句,涉及到的表必须都为InnoDB THEN ROLLBACK; ELSE COMMIT; END IF; END

  10. structs 拦截器

    首先,要跟大家道个歉,前一阵子为给客户个一个DEMO,忙得不可开交,所以很久没有更新Blog.提到这个DEMO我想顺便跟大家分享一下心得——如果大家希望快速开发,一个类似Struts 2这样的简单方便 ...