CODEWITHSUNDEEP
htmlcss
LeO
LeO

Reputation: 5238

How to display browsers screen width?

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.

Upvotes: 1

Views: 2526

Answers (6)

Michael JC
Michael JC

Reputation: 51

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.)

Upvotes: 0

balfonso
balfonso

Reputation: 631

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...

enter image description here

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...

enter image description here

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

Upvotes: 0

Albert
Albert

Reputation: 195

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.

Upvotes: 2

Codesigner
Codesigner

Reputation: 587

In styles panel of dev-tool you can search for it. You can also use show-hide media-queries option.

Here is screenshote

enter image description here

Upvotes: 0

Rawand
Rawand

Reputation: 16

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

enter image description here

Upvotes: -1

Jan
Jan

Reputation: 2853

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.

Upvotes: 0

Related Questions