V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
aisin
V2EX  ›  分享发现

分享好工具: 前端开发工具 之 网页Resize工具: Viewport resizer

  •  
  •   aisin · 2012-11-30 20:38:51 +08:00 · 3095 次点击
    这是一个创建于 4395 天前的主题,其中的信息可能已经有所发展或是发生改变。


    在网页制作过程中, 我们有时需要查看页面在不同分辨率下的表现.

    特别是当你开发的网页符合流行的Responsive design特性时, 我们需要查看pc, tablet, mobile 等各分辨率.

    之前我一直是用web developer的 ‘Resize’ 功能来做这件事情的, 如下图:



    直到今天我发现了另外一个给力的工具 – Viewport resizer.

    1. Viewport resizer使用很简单

    直接把这个按钮拖到浏览器书签栏即可

    2. 使用效果



    3. 更多自定义尺寸

    Viewport resizer自带的尺寸不一定能够满足你的需求, 所以它也可以自定义添加其他类型的屏幕尺寸, 如图:



    Viewport resizer 官方网站 http://lab.maltewassermann.com/viewport-resizer/
    7 条回复    1970-01-01 08:00:00 +08:00
    NemoAlex
        1
    NemoAlex  
       2012-11-30 20:59:20 +08:00
    都是什么年代的东西了
    Chrome Developer Tools Settings Overrides 可以笑而不语么
    loading
        2
    loading  
       2012-11-30 21:21:07 +08:00
    似乎这些工具只能测试比自己电脑最高分辨率小的设备
    airyland
        3
    airyland  
       2012-11-30 21:23:41 +08:00
    aisin
        4
    aisin  
    OP
       2012-11-30 22:04:56 +08:00
    @airyland @NemoAlex chrome如何resize 多个分辨率或尺寸? 求指导
    andy12530
        5
    andy12530  
       2012-12-01 01:42:43 +08:00   ❤️ 1
    @aisin F12,然后点击右下角的图标,切换Tab,选择UserAgent Override,各种设备的屏幕都有,当然,你也可以自定义分辨率。
    RelativeLayout
        6
    RelativeLayout  
       2012-12-01 09:12:43 +08:00   ❤️ 1
    FireFox的自适应设计视图 也能调节
    aisin
        7
    aisin  
    OP
       2012-12-01 11:07:14 +08:00
    @andy12530
    @RelativeLayout 非常感谢2位, 又学到了东西. '感谢已发送' :)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   860 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:43 · PVG 05:43 · LAX 13:43 · JFK 16:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.