In a Chrome extension I want to change the viewport size, something like DevTools responsive view. I am looking into https://developer.chrome.com/extensions/tabs#type-ZoomSettingsMode and see methods for changing the zoom but not the actual width/height.
Dev Tools achieve this through debugger protocol.
You can try and emulate that, but you'll need to use chrome.debugger API.
The relevant command seems to be this: Emulation.setDeviceMetricsOverride - note that this is not part of the "stable" protocol and may change without warning.
Related
Is there any way to show my website exactly the same way how it works on PC, tablets or notebook? I've got full HD laptop and i'm using Chrome - everything works great. On my tablet 10" I also have full HD resolution and Chrome and my website shows like this one on notebook. When I try to to show it on my full HD Lumia 1520 it's crap. I don't use Chrome here so I can understand that some element can be broken by interpreter but it's so approximate that every element go on the others. It looks like 640x480.
Is it some way to force approximate?
If the site developed is not responsive according to the screen size it will not display the content present on it in well manner, you must use bootstrap in your website to make it responsive for all kind of screen resolutions. It may has problem in the CSS. So check the css you used.
Try to use meta tag called view-port. There are different situations and you may set up your website appearance with media queries for responsive results or manage it for being non-responsive but comfortable.
If you need second result - don't use any responsive frameworks or prevent them of using responsive techniques.
There are to much different situations so I can help only if you'll show me the code you have.
in case that you have no choice and had to do css image resize (in my case about 20% smaller than natural image size) browser addons like Hoverzoom for Google Chrome, or Thumbnail Zoom Plus for Mozilla would show popup when you hover over that images.
I want to prevent that behaviour because it totally change user experience in one my UI form.
I understand that there is options to analyse all that addons and how they works, eg. use some event (onmouseover/mouseover) steal src tag - analyse - add some layer, id, class...
Eg. inside Hoverzoom addon for Google Chrome we can find some parts like:
z-index:2147483647
or
$('<div id="hzImg"></div>').appendTo(document.body);
and temporarily solution to disable only that addon is to hide that layer with
#hzImg{display:none!important;}
but it's not way to go because there is many addons like that.
My question is what is your opinion, or solution how to prevent all that browsers type addons to show popups when user mouse hover over css resized images?
Thanks.
In Opera Dragonfly (the Dev tools used in Opera Presto), there is a tab called Utilities.
In that tab, you can "take a screenshot" which loads an image screenshot of the current page into the dev tools.
You can then zoom in/out and use the color picker and the ruler (with sizes being scaled appropriately to the zoom).
This is very useful when cutting markup as it makes it easy to measure spacing, elements, etc... accurately by zooming in.
I'm looking for a similar extension / tool / addon for Chrome / Opera / Firefox that allows me to measure using a ruler when zoomed in but haven't found anything.
Does anyone know of anything that may help?
I've found PixelZoomer for Firefox (https://addons.mozilla.org/en-US/firefox/addon/pixelzoomer/) which fulfills this need.
It allow to zoom into a screenshot made, measure pixels and pick colors.
I'm working on a web project that has some accessibility features mandated by the client, including a "font size changer" to allow the font size to be increased for visually impaired users.
Despite my arguments that a better experience will be had by using the built-in zoom features in the browser, the client has insisted that their users will not know to use these built-in features, so we must provide a text size changing widget.
What I'd like to do, if possible, is cause these page elements to invoke the browser's own zoom functionality (Ctrl + + in firefox, for example). If the browser doesn't support this method of zooming, then I might fall back to increasing the font size with css.
How can I best implement this kind of feature? Is it even possible? Is there some solution that I've overlooked?
There is no way as far as I know to use the browser's built in function. However it can be done with CSS3 or javascript. for a CSS3 example look here: http://www.css3.com/css-zoom/
Well, simple situation. Is it possible to detect if a user has a dual monitor setup from a web application?
If this is possible, is it possible to open a child browser page on this second monitor, so the new window doesn't overlap the old one?
Reason why I ask: I'm working on a web application and at home I have a dual-monitor system. When I go to the administration part of this site, I want it to open in a new browser, preferably on the other desktop. Of course, I could just click, then drag the new window, but doing this automatically seems more fun. :-)
Don't think JavaScript has the proper functions for this. How about Java itself?
I don't think you'll be able to directly detect a dual monitor setup, but you can probably make a good guess by looking at their screen resolution, using javascript's screen.width and screen.height. If the ratio of the width to the height is 8:3, its a good chance they have 2 standard 4:3 monitors side by side. You can do a similar calculation for 16:9 or 16:10.
Using maxpower47's suggestion about resolution, the only way to display the page on the other monitor would be to open a popup, and use the options to set the top, right, width and height properties so the window will appear on the second monitor in a decent size.
Here is a link that describes how to do this: http://www.netmechanic.com/news/vol4/javascript_no7.htm