aisin

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

  •  
  •   aisin · Nov 30, 2012 · 3948 views
  •   You need to sign in to view this topic
    This topic created in 5082 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   ·   Privacy   ·   Solana   ·   2538 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 84ms · UTC 02:44 · PVG 10:44 · LAX 19:44 · JFK 22:44
    ♥ Do have faith in what you're doing.