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. 执行xcopy命令后出现Invalid num of parameters错误的解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在执行一条批处理命令: xcopy /s /i /y C:\ppt D:\Program doc 开始很纳闷,上网一查 ...

  2. WPF中StringFormat的用法

    原文:WPF中StringFormat的用法 WPF中StringFormat的用法可以参照C#中string.Format的用法 1. C#中用法: 格式化货币(跟系统的环境有关,中文系统默认格式化 ...

  3. .net reactor 学习系列(四)---.net reactor应用场景

    原文:.net reactor 学习系列(四)---.net reactor应用场景         前面已经学习了.net reactor一些基础知识,现在准备学习下实际的应用场景,只是简单的保护和 ...

  4. OpenSSL RSA加解密 (.Net公钥加密/ Linux端私钥解密)

    要求在.Net端生成公钥私钥对. 然后在.Net端使用RSA公钥加密:在Linux端使用RSA私钥解密. 最初的尝试是:.Net端使用RSACryptoServiceProvider; linux端使 ...

  5. debian安装node.js

    1,先下载nodejs: # wget http://nodejs.org/dist/v0.8.7/node-v0.8.7.tar.gz 2,解压文件 # tar xvf node-v0.8.7.ta ...

  6. .NET Core 中使用 Humanizer 显示友好时间格式

    今天在将一个 .net framework 项目迁移至 .net core 的过程中,在迁移到显示友好时间格式(比如“1分钟前”,“1小时前”)的代码时,找了找看有没有对应的开源库,结果找到了 Hum ...

  7. WPF 4 日期选择器（DatePicker）

    原文:WPF 4 日期选择器(DatePicker)      前一篇<WPF 4 日历控件(Calendar)> 中我们对日历控件的使用方式有了基本了解,本篇将继续介绍WPF 4 中另一 ...

  8. PHP获得指定日期所在星期的第一天和最后一天

    function getdays($day){ $lastday=date('Y-m-d',strtotime("$day Sunday")); $firstday=date('Y ...

  9. 【Python】设备重启测试

    ①添加读取键盘输入功能,方便测试者选择压测次数! Python提供了 input() 内置函数从标准输入读入一行文本,默认的标准输入是键盘. input 可以接收一个Python表达式作为输入,并将运 ...

  10. Win10《芒果TV》商店版更新v3.2.5：新增会员频道，修复多处细节问题，小年快乐

    听因乐不凡,尽在芒果TV,湖南卫视大型音乐竞技节目<歌手>,每周六晚22:30在芒果TV与湖南卫视同步直播,1月20日周五晚七点半,2016-2017湖南卫视<小年夜春晚>会员 ...