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. Leetcode 242 Valid Anagram 字符串处理

    字符串s和字符串t是否异构,就是统计两个字符串的a-z的字符数量是否一值 class Solution { public: bool isAnagram(string s, string t) { ] ...

  2. 三：Java之Applet

    首先我要说的是Applet是一种应用程序,它是一种由JAVA编写的小应用程序,通常这样的应用程序都像他的名字一样,是一个非常小的程序,或许有些朋友就会问了,那么它是用来干什么的呢?JAVA程序就是JA ...

  3. 浅谈C/C++堆栈指引——C/C++堆栈很强大（绝美）

    C/C++堆栈指引 Binhua Liu 前言 我们经常会讨论这样的问题:什么时候数据存储在飞鸽传书堆栈(Stack)中,什么时候数据存储在堆(Heap)中.我们知道,局部变量是存储在堆栈中的:deb ...

  4. matlab 正态分布相关 API

    randn:标准正太分布(μ=0,σ=1) normrnd:正态分布随机数,(需要手动指定 μ,σ,二者均是标量) mvnrnd:多变量正态分布随机数,(需要手动指定 μ,σ(二者为向量))

  5. 【Struts2学习笔记（3）】至Action注入属性值

    (1)有属性注入? 当一些属性不适合固定写入时适合使用这样的方法,对于一些使用特频繁的类或者方法,非常多类都会用到,那么使用属性注入会节省很多其它的力气.并且在设计的时候就能够提早的把该属性给定义出来 ...

  6. [Gevent]gevent 网络抓取问答

    我听说过gevent基于事件的异步处理功能 如何高效率,该项目已很少使用,今天是没什么学习一些简单的使用. 有正式书面一个非常好的教程 中国版的地址:http://xlambda.com/gevent ...

  7. Swift 中使用 SwiftyJSON 制作一个比特币价格 APP

    Swift 中处理 JSON 数据有很多种方式,可以使用原生的 NSJSONSerialization,也可以使用很多第三方库.原生的 NSJSONSerialization 方式这篇文章中介绍过.这 ...

  8. WPF中样式和行为和触发器

    原文:WPF中样式和行为和触发器 样式简介:样式(style)是组织和重用格式化选项的重要工具,不是使用重复的标记填充XAML,以便设置外边距.内边距.颜色以及字体等细节.而是创建一系列封装所有这些细 ...

  9. Ubuntu更改 resolv.conf 重启失效

    更改Ubuntu的 resolv.conf的时候,重启的时候,经常又给重置了.google大法找到方法. sudo apt-get install resolvconf  原来Ubuntu的resol ...

  10. 利用最小二乘法拟合任意次函数曲线（C#）

    原文:利用最小二乘法拟合任意次函数曲线(C#) ///<summary>     ///用最小二乘法拟合二元多次曲线     ///</summary>     ///< ...