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. centos+nginx+redmine+gitosis安装指南

    说明 这篇文章我现在的主要目的是记录自己安装redmine和gitosis的过程,可能写的有些糙,请各位读者见谅.我会在后面的时间里逐渐完善细节.但我想,这已经是网上迄今为止国内最详细的nginx+r ...

  2. instanceof 运算符简介

    文章摘自: http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/ https://developer.mozilla. ...

  3. c# 计算两个时间的时间差

    //计算2个日期之间的天数差 DateTime dt1 = Convert.ToDateTime("2007-8-1"); DateTime dt2 = Convert.ToDat ...

  4. Unity3D 入门 - 工作区域介绍 与 入门示例

    一. 工作区域详解 1. Scence视图 (场景设计面板) scence视图简介 : 展示创建的游戏对象, 可以对所有的游戏对象进行 移动, 操作 和 放置; -- 示例 : 创建一个球体, 控制摄 ...

  5. POSIX线程学习

    一.什么是线程 在一个程序中的多个执行路线就叫做线程.更准确的定义是:线程是一个进程内部的一个控制序列.所有的进程都至少有一个线程.当进程执行fork调用时,将创建出该进程的一份新副本,这个新进程拥有 ...

  6. iOS- xib(nib) 的重用(在有些情况下有利于加快项目功能的实现)

    0.前言 在项目开发中,我们经常会碰到,某些视图View 内部基本空间都一样,只是数据不同,这时,我们可以用xib来将这个视图封装起来多次重用, (例如,大小固定 控件固定的TableViewCell ...

  7. mysql的my.cnf配置文件

    [client]port = 3306default-character-set=utf8mb4socket = /var/run/mysqld/mysql.sock# user=david# pas ...

  8. java List接口实现类

    首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存放多个元素,能够维护元素的次序,并且允许元素的重复.3个具体 ...

  9. VisualVM使用方法

    VisualVM 简介 VisualVM 是一个工具,它提供了一个可视界面,用于查看 Java 虚拟机 (Java Virtual Machine, JVM) 上运行的基于 Java 技术的应用程序( ...

  10. 【bzoj1370】[Baltic2003]Gang团伙 并查集

    题目描述 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: 1. 我朋友的朋友是我的朋友: 2. 我敌人的敌人是我的朋友: 所有是朋友的人组成一个团伙.告诉你关于这n个人的m条信息, ...