移动端适配方案1, 采用一个基准宽,对当前viewport进行缩放
相关代码如下:
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no" /> <script type="text/javascript"> var clientWidth = document.documentElement.clientWidth, viewport = null, viewportWidth = 'device-width', viewportScale = 1, normalWidth = 2048; if (clientWidth > normalWidth) { viewport = document.getElementById('viewport'); viewportScale = clientWidth / normalWidth; viewportWidth = normalWidth * (normalWidth / clientWidth); viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0'); }else if(clientWidth < normalWidth){ viewport = document.getElementById('viewport'); viewportScale = clientWidth / normalWidth; viewportWidth = normalWidth * viewportScale; viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0'); } </script>
相关推荐
前端开源库-postcss-px-to-viewportpostss px to viewport,一种将px转换为viewport单位(vw、vh、vmin、vmax)的CSS后置处理器。
前端开源库-postcss-px-to-viewport.zip
ember-in-viewport, 在 viewport @ 60FPS,检测Ember视图或者组件是否为 ember-in-viewport检测Ember视图或者组件是否位于 viewport @ 60 FPS 。美国船厂建立和维护收费 ,请与我们联系,咨询专家 Ember.js 。读取 ...
前端开源库-postcss-viewport-unitsPostSS视区单位,自动附加
功能包括拖动,捏到缩放,鼠标滚轮缩放,减速拖动,跟随目标,动画,捕捉到点,捕捉到缩放,夹紧,在边缘弹跳以及在鼠标边缘移动。 查看现场示例,尝试所有这些功能。 所有功能都是可配置和可移动的,因此请根据您...
# With NPMnpm install --save react-vtkjs-viewport vtk.js# With Yarnyarn add react-vtkjs-viewport vtk.js发展本地开发使用<root>/examples作为测试应用程序。 您可以使用 WebPack 别名导入 VTK 视口,如下所示...
react-cornerstone-viewport React的基础医学图像视口组件 文档和示例: : 安装# # NPMnpm install --save react-cornerstone-viewport# # Yarnyarn add react-cornerstone-viewport用法import React , { Component ...
fabricjs-viewport, 在fabricjs中,允许缩放和viewport操作 fabricjs-viewport fabricjs中viewport和缩放的简单实现。不更改数据模型,因此缩放/抓取后画布上的所有对象都不会更改支持触摸屏设备支持自由绘制模式第...
postcss px到视口 English | 的插件,从像素单位生成视口单位(vw,vh,vmin,vmax)。 演示版 如果您的项目涉及固定宽度,则此脚本将有助于将像素... /* px-to-viewport-ignore-next */ padding-bottom : 10 px ;
前端项目-viewport-units-buggyfill,使视区单元(vh_vw_vmin_vmax)在旧WebKit和Trident中正常工作
Using npmnpm install --save-dev nuxt-viewport# Using yarnyarn add --dev nuxt-viewport 添加nuxt-viewport的modules的部分nuxt.config.js { modules : [ [ 'nuxt-viewport' , { /* Viewport options */ } ] , ]}...
前端开源库-viewport-list视区列表,返回设备及其视区的列表
在视口中React 使用来检测组件是否在视口中的库npm install --save react-in-viewport yarn add react-in-viewport 例子为什么一个常见的用例是在组件位于视口中时加载图像( )。 传统上,我们需要监视滚动位置并...
标签 其中个属性的意思: width :- viewport的宽度 height: – viewport的高度 initial-scale: – 初始的缩放比例 minimum-scale: – 允许用户缩放到的最小比例 maximum-scale: – 允许用户缩放到的最大比例 ...
前端项目-jQuery-viewport-checker,一个小脚本,用于检测元素是否在视区中并向其添加类。
gulp-viewport 插件将因其新的替代被弃用。 新插件使用 webpack 进行捆绑,允许在您的自定义主题中使用 ES6 样式的 javascript。 gulp-viewport 将来不会再收到任何更新。 设置 BrowserSync 删除主题中的所有文件 ...
它创建后会自动填充到整个页面区域,并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局介绍: Ext 几乎所有的容器组件都有layout属性。layout属性是决定容器内部组件的排列布局的一个属性。而...
import inViewportDirective from 'vue-in-viewport-directive' Vue . directive ( 'in-viewport' , inViewportDirective ) 使用这些类来触发CSS转换(例如): < div class =' box ' v-in-vi
一个gulp插件,自动为viewport-units-buggyfill附加content属性。请参见 安装 npm install gulp-viewport-units --save-dev 基本用法 'use strict' ; const gulp = require ( 'gulp' ) ; const viewportUnits = ...
角度视口 一个简单的轻量级库,它检测元素何时在浏览器视口中,并向该元素添加一个sn-viewport--in或sn-viewport--out类。 这是的简单库,以。安装通过NPM npm i @thisissoon/angular-inviewport通过纱线yarn add @...