how can I be sure that a website is responsive by only looking the code?. Would you say that if there is at least one @media in the css is responsive?
I found this looking for an answer
The term responsive generally just indicates that the website uses CSS media selectors in order to modify its layout based upon device attributes. (source)
My opinion is that @media doesn't implies responsiveness at 100% but it's a good indicator.
Let's say that the css developer start doing responsive, but leaves it empty. In that case, @media is detected but the website still not responsive.
@media screen and (min-width: 601px) {
}
What do you say? Is there any other alternative to say at 100% that a website is responsive?
Thanks for your time and your answers
"By looking at the code" You will never be absolutely sure, but you can get a very good indication from the CSS and the Viewport tag, as well as the general structure of the HTML elements.
Responsive can mean almost anything, as in, is a website "responsive" if it doesn't display properly on a Nokia C2 or if it shows incorrectly on the original iPhone? It may be responsive but just not to that type of device or that resolution of display.
What does responsive actually mean for you? What target devices are you, and are you not, aiming for?
There are various platforms and devices [such as older phones] that do not and will not support CSS3 so by checking just the @media queries (which will almost always use CSS3 rule elements) you're simply reducing the chances that it does not work.
The only real way to test if a website works on every device is to test it on as many as possible. There are so many devices each with so many different interpretations of the standards that just because a website is or is not broadly defined as "responsive" does not indicate that it will display as intended on every device. I have seen websites that display well on a standard iPad but have been slightly out (a few pixels) on a cheap variant of the iPad.
Finally, I think this question is very broad and can become opinion based.
Additionally:
What sort of check(s) are you intending? Your example of an empty media query seems to indicate that it's an automatic check as in a non-human check so probably the best way is to check that it takes up the full screen size on a large display (>800px wide) and then checking that it passes Google's mobile testing tool .
There is not always a need for media queries, there might be the possibility that a site uses server variables to establish the size of the output screen and to then load a custom CSS file to handle that, which would then not use media queries at all. While less likely now that we have them, this was a big thing when the mobile-web took off and some sites may still retain this approach. These sites display correctly on all/most browsers/devices, but they are not actually inline-responsive.
Look at the source code for http://www.google.co.uk, this website displays correctly on all devices I have ever tried it on (even Nokia C2!) and yet it does not show a Viewport tag, and does not show Media-queries in the traditional sense, this website may be an exception but other websites are similar - Facebook - etc, the point is, there is No one way of getting your result so you have to be i) very specific about what you're looking for and ii) Accept that you will never catch more than say ~60-80% of cases.
EDIT:
There are two types of "responsive, there are inline-responsive (let's say) where the webpage reshapes itself without reloading anything, and then there is server-responsive (let's say) where the server provides data based on the requirement size/device of the visiting browser. You can only check for inline-responsive in the manor you've described so far, which means entirely responsive websites such as Facebook will be left out by your testing tool.
EDIT IN RELATION TO YOUR COMMENT:
The more "generic" your test will be, the more and more valid sites will be given incorrect results. For example displaying on some android phones is different depending on which browser (the android default browser is pants, but the Firefox is fine), so does your tool give that website an all clear, even if someone on the Android phone see's the site and it clearly doesn't render correctly?