aisin

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

  •  
  •   aisin · Nov 30, 2012 · 3607 views
    This topic created in 4937 days ago, the information mentioned may be changed or developed.


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

    特别是当你开发的网页符合流行的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 replies    1970-01-01 08:00:00 +08:00
    NemoAlex
        1
    NemoAlex  
       Nov 30, 2012
    都是什么年代的东西了
    Chrome Developer Tools Settings Overrides 可以笑而不语么
    loading
        2
    loading  
       Nov 30, 2012
    似乎这些工具只能测试比自己电脑最高分辨率小的设备
    airyland
        3
    airyland  
       Nov 30, 2012
    aisin
        4
    aisin  
    OP
       Nov 30, 2012
    @airyland @NemoAlex chrome如何resize 多个分辨率或尺寸? 求指导
    andy12530
        5
    andy12530  
       Dec 1, 2012   ❤️ 1
    @aisin F12,然后点击右下角的图标,切换Tab,选择UserAgent Override,各种设备的屏幕都有,当然,你也可以自定义分辨率。
    RelativeLayout
        6
    RelativeLayout  
       Dec 1, 2012   ❤️ 1
    FireFox的自适应设计视图 也能调节
    aisin
        7
    aisin  
    OP
       Dec 1, 2012
    @andy12530
    @RelativeLayout 非常感谢2位, 又学到了东西. '感谢已发送' :)
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3185 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 12:29 · PVG 20:29 · LAX 05:29 · JFK 08:29
    ♥ Do have faith in what you're doing.