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. sql在单引号的声明标志着嵌套问题

    在sql声明,我们将不可避免地使用嵌套单引号什么时候.但它肯定不是一个直接嵌套,java使用反斜杠做到这一点是不够的.在sql这是做一个单引号逃逸. 例如,下面的例子是展示一个示例存储过程的语句进行查 ...

  2. Oltu在Jersey框架上实现oauth2.0授权模块

    oltu是一个开源的oauth2.0协议的实现,本人在此开源项目的基础上进行修改,实现一个自定义的oauth2.0模块. 关于oltu的使用大家可以看这里:http://oltu.apache.org ...

  3. MIS的趋势必定是围绕机器取代人手，分工越来越细（小餐厅都支持微信自助点餐，结账时就打个折，相当于省了1、2个人手，SQL发明以后，程序员的工作更多了）

    最后,我还想简略的谈谈MIS及MIS快速开发工具的未来. MIS的趋势必定是围绕机器取代人手,分工越来越细.比如:现在有些小型的咖啡厅里的财务子系统就简单到不需要使用者有会计知识,相当于省了会计人手: ...

  4. 一个RPC的demo （good）

    从下面的例子中可以看到,Consumer(client)的代码中引用了Provider部分的class,本例中是 com.provider.EchoServiceImpl和com.provider.E ...

  5. 基于IdentityServer4的单点登录——项目基本结构与流程

    组成 IdentityServer,Api和Client(客户端,asp .net core)本文以官方demo:https://github.com/IdentityServer/IdentityS ...

  6. MVVMLight 实现指定Frame控件的导航

    原文:MVVMLight 实现指定Frame控件的导航 在UWP开发中,利用汉堡菜单实现导航是常见的方法.汉堡菜单导航一般都需要新建一个Frame控件,并对其进行导航,但是在MvvmLight框架默认 ...

  7. pdf密码解除工具

    PDF Password Remover 3.0下载地址: 链接:https://pan.baidu.com/s/1hAmcGB-vMxz79IGGskdzHQ 提取码:q6y8

  8. 图像滤镜艺术---LOMO Filter

    原文:图像滤镜艺术---LOMO Filter LOMO Filter LOMO是一种概念,即强调感受.机缘,弱化摄影技巧,不确定性和随意性是LOMO最大特点.LOMO源于Lomography,LOM ...

  9. Android零基础入门第7节：搞定Android模拟器，开启甜蜜之旅

    原文:Android零基础入门第7节:搞定Android模拟器,开启甜蜜之旅 在前几期中总结分享了Android的前世今生.Android 系统架构和应用组件那些事.带你一起来聊一聊Android开发 ...

  10. HTTP RFC7230

    https://tools.ietf.org/html/rfc7230 https://tools.ietf.org/html/rfc7231#section-4