HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>
网页手机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'>的更多相关文章
- h5 移动端开发自适应 meta name="viewport"的使用总结
本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度: 设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...
- 移动端网页开发 meta 之 viewport
这几天在搞微信公众平台,涉及到几个页面要写,可是当我测试时发现和想象中不太一样,于是去找了几个页面看了下,发现他们页面头部有 meta viewport 的标签,所以去找了下网上的资料,发现千篇一律, ...
- <meta name="viewport" content="width=device-width, initial-scale=1.0">的说明
今天在做适配手机版时,chrome调到手机版,但是还是显示PC端的样式,无法展现出手机端的样式: 开始的时候还以为是chrome版本的问题,最新版本的chrome62.0是有很多变化的,而之前工作中使 ...
- <meta name="viewport" content="width=device-width, initial-scale=1.0">理解
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...
- 关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释
对于移动开发来讲,我还不太熟悉.今天在github上荡了一个系统源码,进行分析.发现其中有这样一段话: <meta name="viewport" content=" ...
- 论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 ...
- <meta name="viewport" content="width=device-width, initial-scale=1" />
今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得 ...
- [HTML] <meta name="viewport" content="width=device-width,initial-scale=1.0">释义
<meta name="viewport" content="width=device-width,initial-scale=1.0">这是 HT ...
- <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 ...
随机推荐
- java设计模式之Proxy(代理模式)
java设计模式之Proxy(代理模式) 2008-03-25 20:30 227人阅读 评论(0) 收藏 举报 设计模式javaauthorizationpermissionsstringclass ...
- php静态属性和静态方法
php静态属性和静态方法 2012-09-29 10:18 1518人阅读 评论(0) 收藏 举报 phpfunction 本php教程主要是学习php中静态属性和静态方法的使用方法和基本的示例. · ...
- 线段树(updata+query)
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- js void运用
谈谈Javascript中的void操作符 http://segmentfault.com/a/1190000000474941 总结: void有如下作用: 通过采用void 0取undefined ...
- HttpClient post中文乱码解决
在javase方式下使用HttpClient没有进行任何编码设置,本地从服务端获取到数据不存在中文乱码. 但是将此段代码部署到Tomcat下面出现了中文乱码,此时设置: post.getParams( ...
- \s+(?<request_time>\d+(?:\.\d+)?)\s+ 解释
<pre name="code" class="html"><pre name="code" class="ht ...
- c语言中内存对齐问题
在最近的项目中,我们涉及到了“内存对齐”技术.对于大部分程序员来说,“内存对齐”对他们来说都应该是“透明的”.“内存对齐”应该是编译器的“管辖范围”.编译器为程序中的每个“数据单元”安排在适当的位置上 ...
- Ajax 缓存问题
Ajax通过GET方式请求服务器数据,Microsoft Internet Explorer浏览器下,由于缓存问题,读取的数据非最新数据,解决问题方法如下: function getData(url, ...
- python爬虫系列之爬京东手机数据
python抓京东手机数据 作者:vpoet mail:vpoet_sir@163.com #coding=utf-8 import urllib2 from lxml import etree im ...
- JDBC官方用法
JDBC官方用法https://bitbucket.org/xerial/sqlite-jdbc/#markdown-header-usage 代码下载https://github.com/xeria ...