I am using Capybara with chrome and I want to resize the window to a specific resolution, in my case 1920*1080.
For this I am using the resize_to function with the parameters above.
But the Window is rather maximized, than the expected resolution is reached. Maybe it is a problem with me working on a mac?
But what can I do, that i always have the proper resolution, and not just a maximized Window?
You can't set the resolution to higher than your screen resolution.
In chrome inspect it gives you the option to set/change the resolution and the pixel ratio. I have set a profile for pixel ratio of 1, and set a profile for ratio of 2 and 3 etc. But when i toggle between each profile...nothing changes..
Any idea why?
Even when i changed the setting to Responsive, and toggle between their settings for 1,2,3...nothing happens at all.
Thanks
I suspect that the device pixel ratio emulation feature is independent from the resolution. So you will only see a change if the page you're looking at uses the device pixel ratio, either by using min-devicepixel-ratio in CSS or by accessing window.devicePixelRatio.
For example, if you view this demo with iPhone 6 Plus emulation enabled you'll see this:
Evaluating window.devicePixelRatio in the console will return 3.
Most of the time the device pixel ratio is used to determine whether it's worth downloading a large version of an image at twice the normal resolution.
That means that even when a site does respond to the pixel ratio you won't necessarily see the difference very clearly. But if you check the network panel you'll see that instead of downloading image.png image#2x.png was downloaded.
I am using a laptop computer with a max resolution on 1366px.
I want to take a screenshot of how a website look in the device emulator mode in chrome - when I set the width to be bigger - like 1600px.
When I do this - the device viewport becomes overflows out of my chrome window and a part of it is hidden - how do i take a screenshot of this -
print screen wont work. Is there a plugin or a chrome extension??
found this menu, which take screenshot of device screen only
latest chrome have "Capture full size screenshot"
in latest chrome we can capture node ,
open developer tool
select node to be capture
press CMD/CTRL + SHIFT + P, it will open a "command menu"
filter commands using "screenshot" keyword
choose "capture node screenshot"
more info at https://developers.google.com/web/updates/2017/08/devtools-release-notes
I have this page :
http://people.opera.com/andreasb/viewport/ex01.html
Which uses viewport for different mobile screen sizes.
When I run this at my iphone I do see the font changes :
But when I use Ripple or other chrome extensions (which I found) , it doesnt show me the increased font size. only
screen size is changing. ( but it doesnt affect the font size )
How can I emulate ( chrome extension) the screen size so it will show me as if I'm on real mobile ?
You don't need a Chrome extension for that, the developer tools already have such a built-in feature.
Open the developer tools (F12, CtrlShiftI, ...).
Click on the gear in the bottom-right corner.
Click on "Overrides".
Enable "Device metrics", and adjust the "Screen resolution" / "Font scale factor" to your desired values.
Examples (360x200 and 200x360, I didn't zoom or resize the screenshots):
Some preset values can be used by switching the user agent (above "Device metrics"). If you want multiple custom values, create a Chrome extension using the chrome.debugger API.
I would like to set browser size (mainly width) larger than the screen resolution in Windows XP. It looks like there is no easy way of dragging the browser window and resizing it. It resizes to maximum width and height of the actual screen, but no larger.
I need to check and test some webpages on large screens, but I have only a small notebook of my own. Is there a way how to accomplish a larger browser window? Preferrably in Chrome, but any browser in Windows will do.
This problem can be solved in two ways: -
1. Universal browser solution
Create a dummy html page
Add an iframe to its body with the width and height attributes set to the desired dimension
Set the iframe's src attribute to the page you want to test
2. Individual browser's developer tools
Chrome
Open the developer tools using Ctrl + Shift + i
Click the second button top left that looks like a mobile phone
Drag the width to the desired width and refresh the page (F5)
Internet Explorer
Press F12
Go to the emulation tab
Change the resolution dropdown to the desired resolution
Reduce the height of the developer tools bar until the horizontal scrollbars appear
Firefox
Open the developer tools using Ctrl + Shift + i
Press the third icon in the icons on the top right of the developer tools called "Responsive Design Mode"
Choose the resolution in the top left dropdown selector on the top left of the webpage viewport.
I am testing another resolution by zoom out - every browser supports ctrl + and ctrl -
This is possible. First 'restore' (i.e. unmaximize) the window. Then you can simply adjust the width and height of the browser by using the edges of that particular window as you like.
This applies to any browser and application windows including google-chrome.
It seems like this doesn't work for every user. There's a tool called uuspy to do this as suggested in here. I haven't try on how to do this. But, since the ui of uuspy looks not that user-friendly here's quick tip.
Open uuspy.
There, in the main window, you'll see a search box. Type the first few letters of the current 'title' of the browser there (like 'test - Google Search'), and then click refresh.
It'll show a list of windows and child-windows of processes containing the searched partial title in the title-bar.
Click on the relevant one (the root/parent is the one most likely.) Then, click GetInfo.
There's two text panes there. On the left pane, there's WS_THICKFRAME. unselect it and then click setStyle.
That will freeze the resizing. I think you'll have to read the original SO answer to know exactly what needs to be done.
simple! "restore" the window to any size, drag the window so that bottom/left corner is off-screen, then resize using top and right sides to make the window ever bigger. if you need it even bigger, just drag the window again so that bottom/left corner is even further off screen.
I managed to resize the Chrome window using ScreenSpace from dandeware.com (no affiliation). There's a free lite version as well as a paid version.
After you install Screenspace, select the Chrome window and press Ctrl-Alt-R. The software then shows a virtual window and lets you resize the Chrome window in any direction beyond the virtual window. Click on the green checkmark and the Chrome window will have the same size on your physical screen.
You can change zoom of the browser or do something like this:
var desiredWidth = 1368;
document.querySelector('html').style.width = desiredWidth+'px';
In Firefox Responsive Design Mode
Menu -> Developer -> Responsive Design Mode (Ctrl-Shift-M)
gives you a drop-down to select the window size.
copy of answer to https://superuser.com/questions/1263519/how-to-create-a-1280x800-screenshot-of-a-chrome-browser-viewport/1263523
Here's another solution.
Under Linux you can freely resize the windows without any hindrance. It also has Mozilla Firefox and Google Chrome, and are almost equal in functionality to the Windows versions more or less. So, my suggestion is try this with a Linux flavor such as Ubuntu or Linux Mint. May be you can try this via the LiveCD as well. That way, you don't have to worry about installing a new OS! I can help with that if you need.
And, I found this handy bookmarklet that resizes the browser to standard screen sizes such as 800x600 etc.
if you have a dual moniter setup and set the resolution higher on one, then you can drag the size of the window on the smaller screen to the size of the larger so it will get bigger than the smaller screen -this is haw i do it with windows 7