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. .mat转成.npy文件+Python(Pytorch)压缩裁剪图片

    需求:现有数据文件V1.mat,里面包含多个数据集,现需将里面的images数据集提取出来,然后进行压缩裁剪成指定大小 V1.mat数据集目录: 1.从mat文件中提取数据(使用Python) V1. ...

  2. .net平台借助第三方推送服务在推送Android,IOS消息(极光推送_V3版本)最新

    最近刚从极光推送官网上看到V2版本要停用,不得不有重新写V3版本的.这里用到了 HTTP Basic Authentication http://www.cnblogs.com/pingming/p/ ...

  3. 团队组队&灰化肥挥发会发黑

    1. 队伍展示 (1. 队名: 灰化肥挥发会发黑 (2. 队员风采 苏叶潇(队长) 201521123114 与众不同,擅长软件测试,对编程望而却步,希望成为测试人员. 宣言:不求最好,只求更好. 李 ...

  4. Qt Creator子目录项目-类似VS解决方案

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt Creator子目录项目-类似VS解决方案     本文地址:http://techie ...

  5. BAT批处理(六)

    字符串处理 批处理有着具有非常强大的字符串处理能力,其功能绝不低于C语言里面的字符串函数集.批处理中可实现的字符串处理功能有:截取字符串内容.替换字符串特定字段.合并字符串.扩充字符串等功能.下面对这 ...

  6. 利用cmake查看opencv的源码

    当我们有时想查看opencv自带的函数的源代码,比如函数cvCreateImage, 此时我们选中cvCreateImage, 点击鼠标右键->转到定义,我们会很惊讶的发现为什么只看到了cvCr ...

  7. hadoop SequenceFile示例

    1.写入,SequenceFile的key和value不一定是Writable,只要能被Serialization序列化和反序列化就可以. private static final String[] ...

  8. YY的GCD 莫比乌斯反演

    ---题面--- 题解: $ans = \sum_{x = 1}^{n}\sum_{y = 1}^{m}\sum_{i = 1}^{k}[gcd(x, y) == p_{i}]$其中k为质数个数 $$ ...

  9. java.util.Stack类简介(栈)

    Stack是一个后进先出(last in first out,LIFO)的堆栈,在Vector类的基础上扩展5个方法而来 Deque(双端队列)比起stack具有更好的完整性和一致性,应该被优先使用 ...

  10. BZOJ4946 & 洛谷3826 & UOJ318:[NOI2017]蔬菜——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4946 https://www.luogu.org/problemnew/show/P3826 ht ...