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. AC 自动机——多模式串匹配

    网站上的敏感词过滤是怎么实现的呢? 实际上,这些功能最基本的原理就是字符串匹配算法,也就是通过维护一个敏感词的字典,当用户输入一段文字内容后,通过字符串匹配算法来检查用户输入的内容是否包含敏感词. B ...

  2. Matlab结构体定义

    定义一个Matlab结构体的代码,以飞行器为例: classdef flightpro properties pos = [ ]; RGB = [ ]; rate; type; end end

  3. 第八章 IO库

    8.1&&8.2 #include <iostream> #include <vector> #include <string> using nam ...

  4. oracle数据库之游标的使用

    一.游标概念 为了处理 SQL 语句,ORACLE 必须分配一片叫上下文( context area )的区域来处理所必需的信息,其中包括要处理的行的数目,一个指向语句被分析以后的表示形式的指针以及查 ...

  5. JavaWeb基础 - 会话

    会话概述 什么是会话 简单的理解:用户打开浏览器,点击多个超链接,访问Web服务器上多个资源,然后关闭浏览器,整个过程称之为一次会话. 需要解决的问题 每个用户在使用浏览器与服务器会话的过程中,会产生 ...

  6. 3dContactPointAnnotationTool开发日志(二十)

      为了使工具更人性化,我又在每个status的text上绑了个可以拖拽实现值改变的脚本,但是不知道为啥rotx那个值越过+-90范围后连续修改就会产生抖动的现象,试了很多方法也没能弄好,不过实际用起 ...

  7. 3ds Max学习日记(六)

      到了周六就不想再忙实验室的活了,于是玩了一下3ds max,第5和第6章每章都只有4个视频,于是就一起弄完了,什么网格建模,曲面建模啥的,nurbs啥的. 附上今日的劳动成果:   叉子(用长方体 ...

  8. 数论的欧拉定理证明 &amp; 欧拉函数公式(转载)

    欧拉函数 :欧拉函数是数论中很重要的一个函数,欧拉函数是指:对于一个正整数 n ,小于 n 且和 n 互质的正整数(包括 1)的个数,记作 φ(n) . 完全余数集合:定义小于 n 且和 n 互质的数 ...

  9. Thinkphp5图片、音频和视频文件上传

    首先是同步上传,最为基础的上传的方式,点击表单提交之后跳转那种.如下前端代码 <!DOCTYPE html> <html lang="en"> <he ...

  10. win7 php连接远程oracle

    <?php /* 先下载oracle客户端 下载地址 http://www.oracle.com/technetwork/topics/winx64soft-089540.html 下载如下三个 ...