viewport默认有6个属性

  • width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
  • initial-scale: 页面初始的缩放值，为数字，可以是小数
  • minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
  • maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
  • height: 设置viewport的高度（我们一般而言并不能用到）
  • user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许

我们把这个标签是在head里面，像这样

<meta name="viewport" content="initial-scale=1">

这样就可以做到对viewport的控制了

移动端布局（viewport）方法的更多相关文章

  1. viewport原理和使用和设置移动端自适应的方法（移动适应电脑）

    viewport原理和使用和设置移动端自适应的方法 HTML中: <meta name="viewport" content="width=device-width ...

  2. 移动端布局最佳实践（viewport+rem）

    通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 ...

  3. 移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）

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

  4. 移动端H5适配方法（盒子+图片+文字）

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  5. 移动端布局 - REM方式

    默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...

  6. vue 实现 rem 布局的 或者 vw 布局的方法

    vue 实现 rem 布局的 或者 vw 布局的方法 一.实现 rem 布局 移动端 <meta name="viewport" content="width=de ...

  7. web移动端布局方式整理

    写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...

  8. Axure中移动端原型设计方法（附IPhoneX和IPhone8最新模板）

    Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...

  9. 浅谈移动端三大viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  10. Vuex里的module选项和移动端布局

    Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出

随机推荐

  1. 使用Wireshark抓取SNMP Trap包

    Wireshark SNMP Trap 过滤关键字:snmp && udp.dstport == 162

  2. WPF 页面切换效果

    原文:WPF 页面切换效果 最近做一个有页面切换的吧.. 我觉得这个功能是比较基础的吧.. 在网上百度了一下.. 用NavigationWindow的比较好.. 因为Demo中是带了淡入淡出的页面效果 ...

  3. Install Oracle 12c R2 on CentOS 7 silently

    准备工作 VMware 虚拟机 CentOS 7 17.08 系统安装包镜像 Oracle 12c R2 软件安装包 配置 yum 库并安装如下包 binutils-2.23.52.0.1-12.el ...

  4. C# WebClient的使用

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  5. delphi的拖拽功能实现

    惭愧,编了这么多年程序,还没用过拖拽功能 这次同事要实现图标互换的功能,让我帮忙看一下,于是趁机研究了一下拖拽事件,发现还是比较简单的 参考了http://topic.csdn.net/u/20081 ...

  6. Windows程序设计画图实现哆啦A梦

    在看雪论坛上看到的一个帖子,很喜欢,转载一下.原文地址:http://bbs.pediy.com/showthread.php?t=138630哆啦A梦是画出来的,不知道作者算这些坐标位置算了多久,真 ...

  7. SQLServer 不允许保存更改的解决办法

    启动SQL Server  Management Studio 工具菜单----选项----Designers(设计器)----阻止保存要求重新创建表的更改 取消勾选即可.

  8. memcached对中文key的支持问题

    默认的memcached客户端对非ANSI的key存取时会有问题,有2种方式解决: 1 在get和set前将缓存的key进行UrlEncode 2 修改memcached.config文件 <e ...

  9. 在UWP 将BitmapImage转换为 WriteableBitmap

    原文: How to convert BitmapImage to WriteableBitmap in Universal application for windows 10? 您可以直接从文件将 ...

  10. Android零基础入门第72节：SwipeRefreshLayout下拉刷新

    在实际开发中,经常都会遇到下拉刷新.上拉加载更多的情形,这一期就一起来学习Android系统的SwipeRefreshLayout下拉刷新组件. 一.SwipeRefreshLayout简介 Swip ...