Viewport Resizer插件使用方法(附下载链接) | KaneSEO

Viewport Resizer插件使用方法(附下载链接)

移动互联网的大潮奔腾不止,对于网站建设以及SEO来说,网站是否能在不同尺寸的终端上展现出做适合用户浏览的样式,将直接决定用户对网站的喜好。今天,Kane为大家带来一款调试网站自适应的浏览器插件——Viewport Resizer,这款插件能同时适用于谷歌、360浏览器,对于百度SEO来说着实是一款不错的自适应调试插件。

 

Viewport Resize插件一、Viewport Resize插件下载

Viewport Resize插件可以在谷歌商店下载,但是国内没有翻墙功能的SEOer,是没办法下载的,所以今天Kane给大家分享一个下载链接,如下:

链接: https://pan.baidu.com/s/1bquyjTH 密码: 4ht3

大家自行下载,下面我们来演示安装流程。

二、Viewport Resize插件安装流程演示

咱先演示一下在360浏览器上的安装流程,说起来,Viewport Resize插件的安装非常简单。

1、首先把下载的插件解压,如下图:

Viewport Resize插件安装流程演示1

2、接下来,打开360浏览器,然后双击解压后的Viewport Resize.crx文件,出现如下图情形:

Viewport Resize插件安装流程演示2

3、点击“添加”按钮,完成Viewport Resize插件安装,如下图:

Viewport Resize插件安装流程演示3

可以看到,上图中绿色箭头所指的就是Viewport Resize插件的图标,点击图标即可使用。

:谷歌浏览器的安装流程这里不演示了,毕竟以前Kane演示过很多的谷歌浏览器插件安装流程,大家可以点击看看:谷歌SEO插件流程

三、Viewport Resize使用方法演示

Viewport Resize插件的使用也是很简单的,不过该插件是英文版的,部分按钮的意思大家可能不太看得懂,这里简单说说。当然,大家也可以亲自动手点一点,自然就能大致搞明白相应的功能。

1、点击Viewport Resize插件图标,出现如下图所示的插件界面:

Viewport Resize插件使用方法演示1

2、先给大家说说这款插件的功能,首先来看看插件左边的按钮功能,如下图:

Viewport Resize插件使用方法演示2

从最左侧一共9个按钮,对应的英文名分别是Auto Size、Mobile、Mobile(e.g.Apple iPhone)、Apple iPhone5、Small Tablet、Tablet(e.g. Apple iPad 2-3rd,mini)、17″ Display、Widescreen、30″ Apple Cinema Display,对应的中文意思分别是自动大小、直板手机尺寸、智能手机尺寸、苹果5尺寸、小型平板电脑尺寸、常规平板电脑尺寸、17英寸显示屏、宽屏、30英寸苹果显示屏。

点击相应的按钮,网页就会切换成相应的尺寸大小,自适应页面布局也会相应变化。打击可以看下面的gif图片,相应的尺寸变化和网页样式的变化一目了然。因为KaneSEO是自适应的,所以可以较好的适应不同终端的显示。

Viewport Resize插件自适应演示

3、接下来我们再来看看Viewport Resize插件的DIY功能,上面的九个尺寸不一定能完全满足大家的使用,所以还有一个设置屏幕尺寸的功能,如下图:

Viewport Resize插件使用方法演示4

图中的数字可以自行填写,随意设置显示屏的大小,如下图:

Viewport Resize插件使用方法演示5

如图,看得到填入屏幕尺寸后,对应的“+”按钮就显示出来了,点击“+”按钮,对应的尺寸就会被添加到尺寸选择项中,如下图所示:

Viewport Resize插件使用方法演示6

4、接下来我们再看看最右侧的几个按钮,如下图:

Viewport Resize插件使用方法演示7

这几个按钮对应的英文是Animate Viewport、Reload current page、Print Viewport、Information、Close toolbar,相应的中文解释是动画视图、重新加载当前页面、打印视图、信息、关闭工具条。

(1)Animate Viewport——动画视图

点击该按钮,网页将自动显示不同终端尺寸下的样式,非常方便网页制作人员以及SEOer观察页面的样式。

(2)Reload current page——重新加载当前页面

这个功能就不需要多解释了,网页重新加载,等同于F5键的刷新。

(3)Print Viewport——打印视图

想要打印网页的显示样式,只要电脑连接了打印机,点击该按钮就可以进行打印了。如下图:

Viewport Resize插件使用方法演示11

(4)Information——信息

这里是指插件的开发信息,不影响使用,大家做个了解即可。如下图:

Viewport Resize插件开发信息

好了,以上就是Kane关于Viewport Resize插件使用方法的简介,希望对大家有用。喜欢的欢迎分享啊!

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:Viewport Resizer插件使用方法(附下载链接) | KaneSEO

发表评论