Browser doesn't scale below 400px?

后端 未结 17 1352
天命终不由人
天命终不由人 2020-12-04 06:01

I\'m working on putting together a liquid style-sheet and it works wonderful. One thing that I\'ve noticed is that my browser window in Chrome won\'t resize below 400px it j

相关标签:
17条回答
  • 2020-12-04 06:59

    For a web developer, in order to test the responsiveness of their website in mobile or tablet whose size is less than 500px or minimum width then use developer tools to test in small screens. For testing, go to developer tools and press ctrl+shift+M or click the device icon at the top left of the developer tools screen to toggle device mode. If the device icon is in blue colour, then you can test your website responsiveness by changing the browser window.

    0 讨论(0)
  • 2020-12-04 07:01

    I'm always running into this issue with pinned tabs. Chrome will not resize below a horizontal width of eight visible pinned tabs if there are any! Just detach the tab that you want to resize to solve this ...

    0 讨论(0)
  • 2020-12-04 07:02

    in chrome the icons of your addons in the top right corner cause the problem

    -> resize the adress-bar (where you type the urls) to maximum width (drag the bar at the right edge to the right)

    or disable the icons

    0 讨论(0)
  • 2020-12-04 07:03

    Adding to what nayan9 and drinkdecaf said, you can just throw document.URL into the call to window.open to see the page you're currently viewing in the 320 window. You might want to add some more to the width if you're expecting a scrollbar.

    javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
    
    0 讨论(0)
  • 2020-12-04 07:07

    This is my first contribution to the Stack Overflow community, and it is my effort to give back to all you wonderful people who have made internet such a powerful tool.
    Now to answer:
    Safari, has this cool feature. You need to activate safari developer option in preferences. Screenshot of setting up preferences in Safari to activate developer menu

    Once activated you can access bunch of very powerful developer tools. One of this tool is Viewport adjustment which can used to test your website responsive layout. To activate responsive lay out testing, one can use the shortcut Command+Ctrl+R to activate safari view port adjustment option. This will give you enough control to test your website on various view port sizes.

    Screen shot of how your browser window will look once responsive layout test option is activated.

    1. Link to how to activate developer menu in safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
    0 讨论(0)
提交回复
热议问题