0

I am using python3 in combination with beautifulsoup.

I want to check if a website is responsive or not. First I thought checking the meta tags of a website and see if there is something like this in it:

content="width=device-width, initial-scale=1.0 Accuracy is not that good using this method but I have not found something better.

Has anybody an idea?

Basically I want to do the same as Google did it here: https://search.google.com/test/mobile-friendly reduced to the output if the website is responsive or not (Y/N)

Silas33
  • 41
  • 10
  • There's no easy way doing this. What I would suggest as the best option is static CSS and HTML analysis. Unfortunately, as far as I know, there's no already existing library that will do this for you, but you can more-or-less easily make one which will trace patterns of responsive design on client side, when scrapping. – user5214530 Dec 30 '19 at 09:31
  • I guess we can find the responsiveness of website source code by reading and searching for media queries in the code like '@media'. If these css media queries are found in the source code it will be responsive in nature with combination of checking the meta tag as well. – Soumen Pasari Dec 30 '19 at 09:35
  • `from bs4 import BeautifulSoup as bs import urllib.request source = urllib.request.urlopen("http://www.website.com").read() soup = bs(source, "lxml") head = soup.head if "@media" in head.text: print("Responsive") else: print("Not Responsive")` I have got to check the accuracy but do you have something to add already? – Silas33 Dec 30 '19 at 09:51

1 Answers1

0

(Just a suggestion)

I am not an expert on this but my first thought is that you need to render the website and see if it "responds" to different screen sizes. I would normally use something like phantomjs to do this.

Apparently, you can do this in python with selenium (more info at https://stackoverflow.com/a/15699761/3727050). A more comprehensive list of technologies that can be used for this task can be found here. Note that these resources seem a bit old/outdated and some solutions fallback to python subprocess calling phantomjs.

The linked google test seems to

  • Load the page in a small browser and check:
    • The font-size to be readable
    • The distance between clickable elements to ensure the page is usable

I would however do the following:

  • Load the page in desktop mode, record each div's style.
  • Gradually reduce the size of the screen and see which percentage of these change style
  • In most cases, from a large screen to a phone size you should be seeing 1-3 distinct layouts which should be identifiable from the percentage of elements changing style

The above does not guarantee that the page is "mobile-friendly" (ie usable in a mobile) but it shows if the CSS are responsive.

urban
  • 5,392
  • 3
  • 19
  • 45