I am opening a PDF file in browser and I need to switch the view to Full Screen before proceeding. I have tried I.pressKey('F11') and even I.pressKey(['Control','+']) but nothing seems to work.
Are there any updated fixes for this? Or any other way to achieve this?
According to the documentation you could use resizeWindow to achieve it.
I.resizeWindow(width, height)
Where width and height are numbers of given pixels, where width can be set to maximize.
I don't know wich driver you are using but if it is Puppeteer you should be aware that:
Unlike other drivers Puppeteer changes the size of a viewport, not the
window! Puppeteer does not control the window of a browser so it can't
adjust its real size. It also can't maximize a window.
Related
I am trying to get comfortable with responsive web design, using media queries to adapt my layout to the current size of the browser viewport. I have noticed that in both Google Chrome and in Firefox, when I drag the right-side border of my browser window to the left to make the viewport narrower, there is a point where I am no longer able to make it narrower. This often prevents me from testing my media queries for the narrowest widths. When this happens, I have found that the browser developer tools allow me to set the viewport width as narrow as I want. This isn't a significant problem for me, but it made me wonder what determines the narrowest width that a browser (either Firefox or Chrome) will allow you to resize the viewport to when not using the developer tools? Is this a browser setting?
If anyone can clear this up for me, I would greatly appreciate it.
Thanks in advance,
Paul
I have a strange requirement with an electron application where I need to be able to force the document to render at a specific resolution and then stretch or squash it to fit the window. For example, I need to specify that the content size is 1920x1080 but then need to squash that down to an actual window size of say 1280x960.
I have tried to implement this in the DOM by setting a fixed body size and scaling this down to fit the window but this has a knock on effect on other transforms and animations which expect the non-scaled version. I need a solution which works outside the DOM so the document behaves as if it actually is running in a 1920x1080 window but then the rendered result is scaled up or down to fit the actual size of the window.
Is there any way to achieve this?
I don't think it's possible to set the native resolution of the window but maybe you can use the HTML viewport meta header. or use BrowserWindow setAspectRatio. or use webFrame.setZoomFactor(2) from electron api
I am using Wordpress with a responsive theme. When I display the content on a mobile device the theme is displayed properly with a regular browser.
When switching into the broswers 'Desktop mode' the responsive theme behaves little bit strange. I guess this is due to the used screensize. Is there a way to display the used CSS media query?
In sense of when CSS says media min-width: 1024px can I see somewhere which screensize CSS is using? Or does there exist a simple page where to test it?
Or even better: How to detect if the browser request a 'Desktop version' of a site and use it for CSS?
I Googled but didn't find any help how to detect it but didn't come up with helpful hints.
window.innerWidth is what you're looking for. Plug it into your dev console and you'll get the exact width after scaling in pixels.
You can use the inspector-tab from the developer tools inside the browsers to view the css-rules an element currently uses.
You can also see and set the size of the browser viewport with the help of the developer tools. Most browsers have a set of presets to simulate specific mobile-screens. This is very helpful for testing and debuging responsive rules/styles.
In styles panel of dev-tool you can search for it.
You can also use show-hide media-queries option.
Is there a way to display the used CSS media query?
I think what you're looking for can be found in your browser's dev tools. In the screenshot below, I tried resizing this exact same page and inspect it using Chrome dev tools. Under elements tab and styles you can see if your media query is being triggered. Please see the screenshot below...
can I see somewhere which screensize CSS is using?
Your browser dev tool will most likely have a feature that displays the current size of your browser window. In the case of Google Chrome, you can see the current size of your browser at the top right corner of your screen while you resize. Please note that the size will only display if the dev tools is currently open and you're resizing the window. Please see the screenshot below...
P.S.
ADDITIONAL:
If you want to have more like a javascript solution, you might want to check out this library. https://github.com/ryanve/actual
Based on the description, it "Determine actual CSS media query breakpoints via JavaScript". Please note that I have not personally used the library myself so I can't really say that it works.
You might also want to check this article that discusses how to detect a media query using Javascript - http://zerosixthree.se/detecting-media-queries-with-javascript/
Hope this helps! :D
the easiest solution is to use 'Window Resizer' (2.6.4) chrome extension
it will give you a popup window that will allow you to resize the view port to any of the standard sizes (xs, sm, md, lg etc.)
open the website in your computer browser and reduce the size of the browser like this example and right click on the center of the page and click inspect then you will be able to see all css style of the website when the website is small
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
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