Member Avatar for kpkarthik90

How to find if the website was designed by responsive web design or not?Is there any tool or shortcut ways to find that?

  • 4 Contributors
  • 3 Replies
  • 221 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Ketul_1

Dani AI

Generated

A compact, practical checklist to determine whether a site uses responsive web design (RWD). This expands on ' media-query hint and 's tool suggestion with quick source checks, browser tests, server-side checks, and a few troubleshooting tips.

Check the page source for a viewport declaration and for CSS media rules. A common viewport tag looks like:

<meta name="viewport" content="width=device-width, initial-scale=1">

Also look for fluid sizing (percent, vw, or flex/grid) and images constrained with max-width. These indicate the layout is intended to scale. Useful references: and @media queries.

Use the browser devtools to simulate devices and resize the window. A responsive site reflows (columns stack, nav collapses) rather than simply shrinking. Inspect for responsive-grid/framework classes (for example container-fluid, row, col-sm-/col-md-) or modern CSS (Flexbox/Grid) rules that drive layout changes.

Distinguish client-side RWD from server-side/adaptive approaches: some sites redirect to an m. subdomain or serve different HTML for mobile UAs. Test headers with a mobile user agent:

curl -I -A "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)" https://example.com

Look for redirects or a Vary: User-Agent header — a sign of server-side variation rather than pure RWD.

Quick tools and common fixes: run Chrome Lighthouse or the Google Mobile-Friendly Test for automated checks, but remember “mobile-friendly” is not identical to “responsive.” Frequent RWD breakages are fixed-width elements, images without max-width:100%, non-wrapping long strings, and unresponsive embeds. Typical fixes: convert fixed px widths to %/flex, add img { max-width:100%; height:auto }, and introduce media queries at logical breakpoints.

Recommended Answers

All 3 Replies

Member Avatar for hericles

The use of @media queries in the html head would be a strong indicator and quick to check. Look for css files with names that suggest different sizes e.g. mobile.css
<link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>
CSS links like the one above only run if the media criteria is true so if you see something like this then you have a responsive design.

Or there are some online tools, like this one

Member Avatar for maxwebinc

You can also use this one.

Member Avatar for Ketul_1

Thanks maxweb for provide useful tool.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.