viewport:

它在页面中设置,是应对手机模式访问网站、网页对屏幕而做的一些设置。通常手机浏览器打开页面后,会把页面放在一个虚拟的“窗 口”–这个比窗口大,也就是你常发现页面可以进行拖动、放大放小,这个窗口即viewport,meta的这个viewport属性基本所有手机浏览器皆支持。
 
<meta name="viewport" content="width=device-width,initial-scale=1.0">

content属性值 :

  • width: 可视区域的宽度,值可为数字或关键词device-width;
  • height: 同width;
  • intial-scale: 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放;
  • maximum-scale=1.0, minimum-scale=1.0; 可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
  • user-scalable: 是否可对页面进行缩放,no 禁止缩放

页面自适应<meta name="viewport">标签设置的更多相关文章

  1. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  2. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  3. 让pc端代码适用移动端——<meta name="viewport"

    写的代码,在pc端运行正常,在移动端就很小很小,需要放大.这时候可引入这个标签 @参考博客 用法,在<head></head>中添加<meta name="vi ...

  4. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  5. 移动端h5页面meta标签设置

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  6. 手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport

    viewport 语法介绍 <meta name="viewport"content=" height = [pixel_value | device-height ...

  7. 移动端meta标签设置

    移动端meta标签设置 1.设置当前html文件的字符编码 <meta charset="UTF-8"> 1 2设置浏览器的兼容模式(让IE使用最新的浏览器渲染) &l ...

  8. meta标签设置(移动端)

    一.首先出结论:移动端meta标签一般设置为: <meta content="width=device-width,initial-scale=1.0,maxinmum-scale=1 ...

  9. 移动端布局的一些设置(在viewport里设置使页面显示相同宽度,显示相同像素大小)

    viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...

随机推荐

  1. LeetCode - 389. Find the Difference - 三种不同解法 - ( C++ ) - 解题报告

    1.题目大意 Given two strings s and t which consist of only lowercase letters. String t is generated by r ...

  2. Python3 条件与循环

    1.条件控制 下面是一个简单的条件控制语句 s=input('Please input a str: ') if s=='python': print('I love python!') elif s ...

  3. Python中__name__属性的妙用

    在Python中,每一个module文件都有一个built-in属性:__name__,这个__name__有如下特点: 1 如果这个module文件是被别的文件导入的,那么,该__name__属性的 ...

  4. <Android>tab选项卡

    1.继承TabActivity实现 a)         在布局文件中使用FrameLayout列出Tab组件及Tab中的内容组件 b)        Activity要继承TabActivity c ...

  5. SQL Server之看懂执行计划

    在SQL Server中,选中一段SQL按Ctrl+L,就可以查看它的执行计划. 上面是一个执行计划的实例,在SQL Server中,执行计划是从右往左看的. SQL Server中,查找数据的方式有 ...

  6. QWidget一生,从创建到销毁事件流

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QWidget一生,从创建到销毁事件流     本文地址:http://techieliang ...

  7. 【Spring.Net】- 环境搭建

    参考文章:http://www.cnblogs.com/GoodHelper/archive/2009/10/25/SpringNET_Config.html 一.环境下载及安装 到Spring的官方 ...

  8. Maven面试宝典

    一.Maven有哪些优点和缺点 优点如下: 简化了项目依赖管理: 易于上手,对于新手可能一个"mvn clean package"命令就可能满足他的工作 便于与持续集成工具(jen ...

  9. C结构体【转】

    “结构”是一种构造类型,它是由若干“成员”组成的.每一个成员可以是一个基本数据类型或者又是一个构造类型.结构既是一种“构造”而成的数据类型,那么在说明和使用之前必须先定义它,也就是构造它.如同在说明和 ...

  10. 1193: [HNOI2006]马步距离

    1193: [HNOI2006]马步距离 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2027  Solved: 915[Submit][Statu ...