Viewport Resizer的开发背景
现在开发人员如果要开发一个同时支持PC端与手机端的网站的话,由于电脑和手机显示 屏肯定不一样大小的,所以要跟对手机等移动设备进行单独地测试,而对于 电脑上的浏览器来说,其视角一般比电脑的分辨率稍微小一点,但是肯定比手机设备要大得多了,如果我们每次测试的时候手动地调整浏览器进行缩放的效果和手机 中显示的效果并一定是一样的,因为电脑上的浏览器缩放到一定程度就会出现滚动条,无法达到逼真的测试效果,所以我们需要一款能够改变PC机中浏览器的视角 的谷歌浏览器插件。
Viewport Resizer的简介
Viewport Resizer是一款可以自由调整当前浏览器视角大小的谷歌浏览器插件,在chrome浏览器中安装了Viewport Resizer插件以后,开发人员可以很方便地在电脑的浏览器中模拟手机等移动设备的视角大小,通过这些相对真实的视角模拟开发人员可以更加及时地调整移动设备中网站的显示效果。
Viewport Resizer为开发人员提供了集中常见的视角大小,其中包括手机等移动设备、平板设备、大屏PC浏览器等常见的浏览器视角大小,用户可以点击这些按钮轻松切换到相应的视角大小,除此之外,用户还可以在浏览器的上方自定义当前的视角大小来获得更加个性化的浏览器视角调整。
Viewport Resizer的使用方法
1.在谷歌浏览器中安装Viewport Resizer插件,并在chrome的扩展管理器中启动调整浏览器视角大小的功能,Viewport Resizer的下载地址可以在本文的下方找到,安装离线chrome插件的方法可以参考:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?
2.使用谷歌浏览器打开任意一个需要测试不同浏览器视角显示效果的网站,然后点击谷歌浏览器右上角的Viewport Resizer插件按钮,并在页面上方弹出的工具栏中选择常见的浏览器视角大小按钮启动测试功能,如图所示:
3.如果用户需要更加个性化的浏览器视角调整,还可以使用Viewport Resizer插件的自定义浏览器视角大小的功能,如图所示:
4.如果用户想要回归到原始状态,可以点击工具栏右上角的关闭按钮,或者点击自动调整浏览器视角大小即可。
Viewport Resizer的注意事项
1.Viewport Resizer插件只能修改浏览器显示大小,对于手机网站来说请求的User-Agent信息仍然是PC浏览器发出的信息,如果想要改变浏览器请求的User-Agent头部信息,可以参考:使用User-Agent Selector插件模拟手机等移动设备访问网站。
2.Viewport Resizer虽然能够模拟移动设备中的视角大小,但是由于电脑的屏幕大小固定的原因,真实的测试效果可能会有点差别。
Viewport Resizer的联系方式
1.来自:i.wanz.im。
点击转到改变浏览器视角大小:Viewport Resizer下载页面
来自: Chrome插件 » 改变浏览器视角大小:Viewport Resizer
下载附件:20150522005721chromecj.com
相关推荐
Viewport Resizer是用于测试任何网站的响应能力的工具。它是基于@MalteWassermann的工作包,请在http://lab.maltewassermann.com/viewport-resizer/上查看其工作,https://www.iconfinder.com上的图标/ icons / ...
Viewport Resizer是用于测试任何网站的响应能力的工具。 只需安装扩展程序,转到要测试的页面并检查页面的各种屏幕分辨率。 直接与团队和客户共享定义的设备和断点环境的最聪明方法。 该工具不应替代真实的设备仿真...
录像机 适用于HTML页面的Ultimate Viewport Resizer
移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致...
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍: Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域,并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
viewport.jquery 关于 视口是简单但方便的jQuery插件,它添加了方法和CSS选择器来检查元素是否在特定视口中。 此外-即使不是亲属,您也可以检查两个单独元素的位置关系。 插件使用确定元素位置,因此请确保它满足您...
手机浏览器是把页面放在一个虚拟的窗口(viewport)中,通常这个虚拟的窗口(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放...
abaqus python实现对所计算的三维模型,自动遍历,寻找最大应力值
安装凉亭bower install -S viewport-dimensions npm npm i -S viewport-dimensions (导出一个对象:) var viewport = require ( 'viewport' ) ;原料药#宽度() 返回{number} -浏览器视口宽度。 viewport . width...
viewportSize, 使用JavaScript获取 CSS viewport的大小 viewportSize允许你使用JavaScript获取 CSS viewport的宽度和高度。作者:Tyson Matanich http://matanich.com 。许可证:MIT演示:http://matanich
移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签...
SPVLoc: Semantic Panoramic Viewport Matching for 6D Camera Localization in Unseen Environments
移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致...
Flare论文阅读总结(部分有参考知乎博主,侵删),本资源仅供本人使用
视口 ##用法 meteor add dispatch:viewport Viewport('page').goTo('login', { myData: true, transition: Viewport.Transition.slideX }, function () { // transition is done }); 受启发
viewport响应式模板
从pixi-viewport v3迁移到v4 视口需要导入或要求如下: import { Viewport } from 'pixi-viewport'// orconst Viewport = require ( 'pixi-viewport' ) . Viewport 插件已移至其自己的对象: // viewport....
private var _viewPort:Viewport = new Viewport; //创建一个摄像机 private var _camera:ArcBallCamera = new ArcBallCamera; //创建一个立方体群组 private var _cube:Group =new Group(); //把camera...
PyQt(Python+Qt)学习随笔:QAbstractScrollArea的viewPort(视口)理解.rar
Apple公司率先在其iPhone中的Safari浏览器中实现了viewport meta标签,其他浏览器厂商也快速采纳了它。由于IOS、Android及类似平台在平板电脑和智能手机设备中的流行度和市场占有率,使得viewport meta标签被广泛...