在不同的屏幕分辨率下测试网站

Question

One user reported me that on his 11 inch macbook air all messed up. Now I do not have idea how can I fix that. Maybe there is some tools that I can use to emulate 11 inch macbook air? Thanks

Answer 1

If you're using Firefox 15 or later, you can use the responsive design view by pressing Ctrl-Shift-M or going to the Firefox menu -> Web Developer -> Responsive Design View. That lets you easily resize the page (from a list of common resolutions, or arbitrarily by dragging the edges) without having to resize your browser window (as well as letting you resize it larger than your window). Other browsers might have a similar feature, but I'm not sure.

Answer 2

If you press Ctrl + Shift + M in your keyboard on, Mozilla Firefox and/or Google Chrome , then they will launch the Responsive Design View (Firefox) or Device Toolbar (Chrome) mode. Here you can manually adjust the window width and height to a match any device dimensions you wish, or you can also select from a set of preset device dimension options. It also gives the option to view the selected dimensions in either landscape/ portrait mode (for portable devices such as mobile or tablets) to see how a/your website would look in those different orientations.

I am not sure about any other browsers, but you can try to use the above keyboard shortcut, on another browser of your choice and see if it works there aswell.

Alternatively you can manually toggle the Responsive Design View (Firefox) or Device Toolbar (Chrome) modes, by navigating to:

Firefox 59

Menu (hamburger icon on top right) > Web Developer > Responsive Design Mode

Chrome 65

Menu (Three-dot icon on top right) > More Tools > Developer Tools

OR

Simply press Ctrl + Shift + I to launch the Developer Tools

Once the Developer Tools has launched click on the toggle device toolbar icon on the top-left corner of the Developer Tools menu, to view the webpage in responsive design view.

Again, I am only aware of doing this in Mozilla Firefox and Google Chrome , so other browsers may have a similar or different approach.

UPDATE

Edge Browser (Windows 10)

Use the keyboard shortcut Ctrl + SHIFT + I , OR navigate to Menu (three-dot icon on top right) > F12 Developer Tools to open the developer tools Menu, then go to the Emulation tab to see options for customising the window to different device size and dimensions.

Answer 3

First, you do not need to emulate a 11 inch screen but the screen resolution because no matter the inch of the screen, resolution can have multiple values.

I would suggest you to use a pluggin like "web developper" available for firefox and chrome (don't know for others), it will help you to resize your browser in different resolutions for testing.

chrome : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

firefox : https://addons.mozilla.org/fr/firefox/addon/web-developer/

Answer 4

You can also use web app to test your site at different screen resolutions. http://whatismyscreenresolution.net/multi-screen-test

1. Go to tool to test website at different resolution , enter your site's url, and hit "test" button
2. Get the resolution of MacBook Air and enter it in the toobar.

This tool is really good and apart from testing your site for MacBook Air, you can also test it for different device resolutions