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.
Related
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.
This isn't exactly a coding question but I'm not sure what other stackexchange it should fit into. It is related to responsive design development.
Safari and Chrome decrease in width to about 400px. Firefox goes down to 90px. Is there a way to get Safari and Chrome to decrease further in width?
If not, why is there a hard stop on those two browsers?
I'd like a further decrease for easier/better debugging of responsive sites.
Chrome will decrease to as small as it can based on the extension icons contained in the omnibox-bar. I'd suggest using a responsive testing tool such as ish:
http://bradfrostweb.com/demo/ish/
or an extension such as responsi
https://chrome.google.com/webstore/detail/responsi/pgpclfmjhbalmpmpcghkpbfbkobhhnno
to test within chrome.
I have been looking for this for a while:
There are a ton of ruler extensions for all the common browsers but I can't find one that has a magnifying glass. Can anyone help me out please?
I'm talking about a magnifying glass like the Awesome Color Picker extension in Chrome:
The ruler extensions I've used really hurt my eyes when trying to measure anything to pixel precision.
Any browser is fine with me.
Note #1: This is not about seeing the width of elements through 'inspect element'. I need to find the precise number of pixels between any two points on a web page.
Note #2: Zooming in the browser doesn't do it either because some of the pixels change when I zoom.
Thanks in advance!
I am not sure if this is what you were looking for, but it might be worth checking out. It has zooming in on pixels, up to 3200%.
http://matthiasschuetz.com/pixelzoomer/
It's a FireFox add-on. I am not affiliated with the add-on at all.
Check out xScope from IconFactory. http://xscopeapp.com I use it all the time for development layouts. It's got several tools, including rulers, guides, a tool for dynamically measuring elements, and a loupe for viewing an enlarged part of your layouts. It's not a browser plugin, but I find that this makes it actually MORE useful.
I want to use After Disaster font on my website, but I can't achieve the same vertical position of displayed text in different browsers. Even more - it is dependent on system too. You may test this:
http://jsfiddle.net/z7rby/1/
On Linux Google Chrome displays text about one pixel higher than Firefox and Opera. On Windows Google Chrome displays it in the middle of background. What can I do with that?
There is no way to solve this problem. You have to accept that fonts will be rendered slightly differently on different systems, and find another way to achieve your visual goals.
You can control your layout via positioning CSS e.g. width, height but not font rendering.
If that level of control is not "good enough" then you can write browser-dependent CSS (tutorials exist online) to compensate for differences.
But please remember the goal in all computing is "good enough": Perfection is not cost-effective!
Once you have achieved a level where further improvements require a certain effort, but there are more important things to spend that effort on, that is the point when you have finished.
In my case I made the div width 500px,
but it automatically zoomed out when browsed in a mobilephone
How's the magic done exactly,is it device specific?
You might want to try something like this in the head of the html page:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
For more info see here:
http://davidbcalhoun.com/2010/viewport-metatag
Edit: the answer below no longer reflects current normal practice. There is now a fairly well established standard called the meta viewport which controls how the page is scaled on mobile. In the absence of this, sites are deemed "not mobile friendly" and mobile browsers show the page at typical desktop width, zoomed out to show full width.
It is browser specific.
It's even a configurable option in most mobile browsers (eg Android, Nokia S60, Opera Mini). I prefer to have it turned off, so that pages open with normal 100% zoom (and if it's cut off, I just scroll).
Some people prefer to see the whole page width at once even if the text is too small to read, then double-tap to zoom up after that.
The browser typically calculates the total width of the page first. In this calculation any flexible-width element is taken to be the minimum width which can fit all its children. If this is less or equal to the width of the browser window no scaling is done, but if it's greater, the browser sets this as the virtual page width and, if the user has turned this option on, scales everything down (like zooming out in a modern desktop browser) so that that minimum width of the page occupies the width of the browser window.
The browser do whatever it wants to. Since mobile phones have a small screen probably this browser zoomed out to be more pleasant to look the page.