I'm building a Chrome extension that takes a screenshot of the user's active tab. I want to take both desktop and mobile screenshots.
For Desktop screenshot, I use the the chrome.tabCapture API functions and capture the content of the currently active tab.
How can I take a screenshot for mobile or custom dimensions?
You can use chrome.windows.update to force a resize. The received updateInfo object should have the width and height you wish to use. (there is no standard 'mobile' size).
You'd probably want to also -
Store the pre-resize dimensions and restore to it later. You can do it with chrome.windows.getCurrent, and inspect the returned Window for width and height.
Take care to account for toolbars and window margins, to get as
close as you can to emulating true mobile experience.
Related
When i access amazon.fr via my mobile it presents a different layout than the one is displayed if I access to amazon.fr via my desktop computer event if i reduce the width of the browser to the size of the mobile.
How does it works?
Actually the url is the same for desktop and mobile sites.
https://www.amazon.fr/
Both are absolutely same. But You can not find out the difference by adjusting the browser width.
The changes are made using window.ready function (or when window is ready). The styles are applied according to the window size that calculated when loading the page. This is to avoid excess use of media querying.
You can find out this difference from your desktop only by reloading the page or clicking on links in full width and adjusted mobile screen width
Have a look at here as well
This is a one page scrolling site for kids. The content is best viewed at 1200 pixels wide. Is there a way I can make the window default to that size when the site is visited?
No, but you can have a landing page with a button on it that opens your desired page using window.open, and you can tell window.open how big you want the window it opens to be.
Details here, but basically (inside a click handler or similar):
window.open("http://example.com", "width=1200");
This is a suggestion to the browser, which it can ignore if it likes, but a value in that range is likely to be fine. (Whereas browsers tend to disallow very small windows.) You can also specify height, whether it has various window features, etc.
Of course, if you can make the page work well in any width, that would be better. Some of us are positively irritated by sites that try to tell us how wide our browser windows should be. :-)
You can open a new window of specific size on a click of a link/button using window.open like :
<a href="some url"
onclick="window.open(this.href,'targetWindow',
'width=700px,
height=700px');
return false;">Popup link</a>
There are two ways you can do this:
Using a div, iframe, or other element to contain everything on your page and specify the size on it. This won't change the actual size of the browser window.
Open a new window (popup) and specify a size on that. Note that if it's not done as part of the user clicking on something, it will likely be blocked by the browser's popup blocker. More info can be found here
Both of those are ignoring any issues with trying to force a size on the user. Things like:
What if their screen isn't large enough?
Will this be annoying to my users?
What if my user resizes the window?
Will all browsers support the resizing I'm after?
Will trying to resize cause horizontal scroll bars?
In general you should aim for something that can work across multiple sizes, but have a more reasonable minimum size. 1024x768 is usually a good resolution to aim for. This will much around with mobile browsers, but I presume you're not worried about those.
I am resizing a popup window when an anchor is pressed.
It works well on my desktop computer, but it doesn't on my laptop.
It resizes to a value smaller than the specified in window.resizeto().
Does JavaScript window.resizeto have maximum values in browser settings? How do I change those values?
Thanks
This will depend only on the browser, and OS limitation.
For example, according to Mozilla Dev Network Documentation :
Specification
DOM Level 0. Not part of any standard.
So this only depends of the browser implementation of window object.
Check the resizeTo method Browser Documentation to see the size limitations.
IE and FF do not seem to make a limitation in the window size,
it will depend on how the OS GUI will handle the new size.
However, MDN says this about resizeTo rules :
You can't resize a window or tab that wasn’t created by window.open.
You can't resize a window or tab when it’s in a window with more than
one tab.
https://developer.mozilla.org/en-US/docs/Web/API/Window.resizeTo
MDN Documentation should be the most standard documentation. (Even if, as they described, this method is not standard)
My desktop has 2 screens and the maximum width available is the sum of both.
Thank you all for your help.
One of windows in my application has the size set by administrator. I need to be sure that the window does not open with any border out of screen. By my experiments the window fills the screen when the required size in window.open (resizeTo) is larger. However, is it true for any resolution and any browser (operating system)?
Edit
May I hope that the size cannot be larger when outerWidth (outerHeight) is not supported? ( Getting the width/height of the entire browser in IE? )
Edit 2
I have made tests on Fedora 16 (LXDE, Plasma, Gnome) with Konqueror and Firefox. I did not succeed to open a window larger then screen.
#vanH: then you need to provide height and width parameter
window.open("", "mywindow1", "status=1,width=2050,height=2150");
I did not manage to find a way how to do it and it seems that there is no useful proposal (for about a month). So I conclude it is not possible (or not simply possible on major operating system/browsers).
I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?
So basically you want to mimic the effect of hitting F11? Check out [old dead link]
I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.
To find out the windows height and width you can use the following:
window.innerHeight/Width -> All browsers but not IE
document.body.clientHeight/Width -> All browsers
document.documentElement.clientHeight/Width -> All browsers
More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow