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. wamp下安装https 实现 ssl 协议,主要是编写小程序通讯

    也不知道腾讯为啥要这个限制,是想卖他的服务器资源么 简单几句话 1 wamp3.0.X的版本不行,我折腾了一天半,放弃了,换成wamp2.5 一次通过 2 证书 去腾讯云申请,单独域名的可以申请免费的 ...

  2. centos环境配置(nginx,node.js,mysql)

    1.安装 Install GCC and Development Tools on a CentOS yum group install "Development Tools" n ...

  3. 关于docker 基础使用记录

    Docker Hub地址:https://hub.docker.com Docker Hub 存放着 Docker 及其组件的所有资源.Docker Hub 可以帮助你与同事之间协作,并获得功能完整的 ...

  4. VUE中组件的使用

    关于vue组件引用 使用Nodejs的方法 被引用的组件要暴露 module.exports={}; 引用时 用 var abc= require("组件的路径") 然后 就可以用 ...

  5. Python中的__future__

    在Python中,你如果在某一个版本的Python想使用未来版本中的功能,可以使用如下语法实现: from __future__ import futurename 这条语句必须放在module文件的 ...

  6. 路由器如何设置上网(TP-LINK)

    最近宿舍公用的网络一直不太稳定,正赶上毕业季,本来就打算自己买一台自用的路由器,于是我从一个毕业的师姐手里15RMB收了一台路由器,师姐还给了我一根5m的网线和两根全新15m的,感觉光网线就赚翻了. ...

  7. 20172330 2017-2018-1 《Java程序设计》第四周学习总结

    20172330 2017-2018-1 <Java程序设计>第四周学习总结 教材学习内容总结 这一周的内容还是比较多的,而且很复杂,包含第四和第七章. 第四章向我们介绍了类结构的定义与概 ...

  8. alpha-4

    前言 失心疯病源4 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 19:00~21:50 利用背景相减法完成背景构建与更新模块,查找关于blob更多的论文资 ...

  9. iOS开发跳转指定页面

    for (UIViewController *VC in self.navigationController.viewControllers) { if ([VC isKindOfClass:[Car ...

  10. Linux less命令语法

    一.Linux less命令语法 less [参数] 文件 less命令非常强大,在此只介绍几个常用的参数,更多参数使用man less来查看Linux帮助手册. -b <缓冲区大小> 设 ...