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. python 教程 第四章、 控制流

    第四章. 控制流 控制语句后面要加冒号: 1)    if语句 if guess == number: print 'Congratulations, you guessed it.' # New b ...

  2. 如何删除您的注册js图书馆bower私人图书馆

    建立你自己bower 这样的私人图书馆参考http://blog.csdn.net/nsrainbow/article/details/35988611 本文 假设我们想注册自己的创作js私人图书馆图 ...

  3. OpenGL（十一） BMP真彩文件的显示和复制操作

    glut窗口除了可以绘制矢量图之外,还可以显示BMP文件,用函数glDrawPixels把内存块中的图像数据绘制到窗口上,glDrawPixels函数原型: glDrawPixels (GLsizei ...

  4. Program for Linux USB-devices driver step by step (ONE)

    Program for Linux USB-devices driver 開始啃硬骨头~ 这里我打算一步步给出USB device driver 的demo.希望有心能可以共同交流学习. 希望认识很多 ...

  5. .net中模拟键盘和鼠标操作

    原文:.net中模拟键盘和鼠标操作 周银辉 其实SendKeys类提供的方法蛮好用的,可惜的是WPF中不能用了,说是WPF的消息循环方式改成了Dispatcher,所以直接调用System.Windo ...

  6. Easyui Tab刷新

    Easyui Tab刷新: function refreshTab(title){ var tab = $('#id').tab('getTab',title); $('#id').tab('upda ...

  7. JSONObject 解析

    前解析json已使用get方法,但是,假设抛出将解决很烦人中断. 今天发现JSONObject还提供了一个更好用的方法opt.看来以后文档还是要更加认真的读的.以下是文档中的原文. A JSONObj ...

  8. Expression Blend学习四控件

    原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点 ...

  9. C#正则表达式简单案例解析

    正则表达式主要用于字符串的操作. 1.Regex.IsMatch:判断指定的字符串是否符合正则表达式. 2.Regex.Match:提取匹配的字符串,只能提取到第一个符合的字符串.这里还可以使用组来提 ...

  10. CS224n笔记二：word2vec

    如何表示词语的意思 语言学中meaning近似于"指代,代指,符号". 计算机中如何处理词语的意思 过去一直采用分类词典,计算语言学中常见的方式时WordNet那样的词库,比如NL ...