4

I have once seen safari showing me the pixel dimensions of the browser window, even when I resized it dragging left or right, it showed how many pixels in the x axis and how many pixels in the y axis.

But now when I resize the window it doesn't show the number of pixels of any current size.

How can I get the resolution / number of pixels in x and y, to show when I resize the safari browser window(as I've seen it do before)?

note- (was formerly - mistakenly - titled as safari has stopped showing me the resolution when resizing a window)

Improve this question
5
  • 1
    I can honestly say I have never seen that. Are you sure it was not a Safari extension that no longer works or another system utility? Can you be more descriptive of what you see and what it looks like?
    – Steve Chambers
    Commented Oct 5, 2018 at 20:34
  • 1
    I concur -- I've never seen any macOS application do anything like this (other than Terminal, which shows the size in character blocks in the title bar).
    – calum_b
    Commented Oct 5, 2018 at 20:52
  • @SteveChambers I found the answer.. Shall I reword the question so as to ask how to get the pixel dimensions (without any extension) ? (not that safari stopped showing me the dimensions, which wasn't correct) So that way my answer will fit the question and the question won't have an error in it
    – barlop
    Commented Oct 9, 2018 at 5:07
  • Other mod may feel differently but this Q&A likely has some value and there is no need to delete it.
    – Steve Chambers
    Commented Oct 9, 2018 at 12:32
  • @SteveChambers I wasn't suggesting deleting it, but anyway
    – barlop
    Commented Oct 9, 2018 at 15:30

5 Answers 5

Reset to default
5

Although the accepted answer works ok for individual elements as you hover, it can be tricky to capture the entire browser / window viewport as you try to resize.

Another approach would be Safari's Responsive Design Mode, which will show you the width and height in pixels as you resize. Its tucked away in the Develop Tab, then Enter Responsive Design Mode

enter image description here

Improve this answer
3
  • "Responsive Design Mode" is pretty cool, but lacks a lot of things, like any recent devices, lots of older devices, and being able to put devices in portrait/landscape, and I guess some ability to add custom devices.
    – Jonny
    Commented Aug 19, 2020 at 5:32
  • @mfink Is it possible to manually resize the viewport width (& height) like you can do in Chrome? Resizing it with the mouse is too difficult/impossible to make the dimension a certain px-size
    – tonitone120
    Commented Jan 17, 2021 at 1:32
  • You can change a device from portrait to landscape and back again just by clicking it more than once.
    – Graham Lea
    Commented Nov 25, 2021 at 3:47
2

You have to have the element inspector open. So with element inspector open, then, In Safari, when you hover over an element, it shows the pixels.

And you can get it to show the pixels while you resize a window, to do that you click the crosshair icon in the inspector, then hover over the background so it shows the pixels, then move the mouse across so it still shows the pixels, and resize the window and it will update the pixel dimensions.

Note that in Chrome, if you have the inspector open, and resize, then it shows you the pixel dimensions while you resize.

Improve this answer
2
  • what is the element inspector and how do you open it?
    – Natsfan
    Commented May 3, 2019 at 23:40
  • First enable the Develop menu in Preferences > Advanced. Then choose Show Web Inspector from that menu or press Option-Command-I
    – Louie Louie
    Commented May 4, 2019 at 0:22
2

In case anyone is still looking for a better solution, you can use the ruler tool in the Web Inspector to show live measurements.

Open the Web Inspector (⌥⌘I) and click the ruler tool in the icons at the top left.

One thing to keep in mind is to start with a page that has no scrolling as it appears to ignore space for the scroll bar when present (15px difference in my case)

Screenshot of Web Inspector Measurements tool

Improve this answer
0

I'd like to share my experience with Opera/Mac OS. There is a similar inspector panel, available from Developer|Developer Tools menu. Measurement function is turned on after selection of an arrow instrument in an upper left corner of that panel. What I've found, is that pixel measurement depends on the web page zoom level (menu Zoom|Zoom In/Zoom Out). In my case, I tried to measure some elements in a browser game. It could not be zoomed at all, i. e. zooming did not change a single pixel on the screen, and yet, measurements were different at different zoom levels. The same may apply to Safari as well.

Improve this answer
0

Show rulers and element dimensions on hover:

  1. Select Safari Menu Preferences
  2. Go to Advanced Tab
  3. Enable Show Develop menu in the menu bar
  4. From Develop Menu, select "Start Element Selection" ⇧⌘C
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .