How to see on the desktop the mobile version of this site that is not responsive?

Asked

Viewed 3,723 times

1

I need access to the mobile version of the articles of a certain website on the desktop, for the development of an extension.

An example page.

The site is not responsive, does not use a specific mobile subdomain, but changes the user-agent for a mobile phone also does not solve. Someone knows what is happening?

  • +1 because the question generated an interesting subject to development and study on the main subject (mobiles), because some browsers today are more than "simply browsers", are development tools with advanced features. In other words, this is a "common tool case among developers" that I assume is within the scope: http://answall.com/help/on-topic. - of course it can even be closed to avoid answers such as links to extensions or things like that, but it still deserved a response.

1 answer

6


It’s not necessary extensions or plugins, Chromium-based browsers have advanced tools for simulating devices such as smartphones and tablets.

Simulate mobile browsers

Navigate to the site of interest and using Google Chrome press:

  • Ctrl + F12

Or at the Opera:

  • Ctrl + Shift + i

The developer tools will appear:

Developer tools

Then click on the icon that looks like a cell phone:

device mode

When clicking will appear this screen and it will enter in device selection and simulation mode (in my case the default is Iphone4):

developer tools chrome e opera

Then click on combo and change to the desired mobile model:

developer tools chrome e opera

Note that there is an orange Tarja and that the User-agent changes (where it is written UA), this message says that some websites are required to reload the page:

developer tools chrome e opera

Being a non-responsive website you will need to reload the page with F5 and depending on the cache use Ctrl+F5 (that will ignore the cache to specific tab), see how the site pt.stackoverflow.com after the F5:

developer tools chrome e opera

There are some websites that use Cookies or localStorage to save the default page you should use, mobile or desktop, so neither the Ctrl+F5 will work, in this case follow these steps:

  1. Open an anonymous window (do not open any website on it)
  2. Clicking F12 if Chrome or Ctrl+Shift+i if it is Opera
  3. Then select the Device desired
  4. Then paste in the address bar the desired site.

See how it looks in the anonymity mode:

Modo anonimo

Extra functions of Chrome and Opera developer tools

  • Simulate slower connections:

    developer tools chrome e opera network

  • the Potrait change the width by the height and vice versa, ie simulates the rotation and the icon with the 2 to change the pixel ratio simulating screens with retina.

    developer tools chrome e opera

  • 1

    Thank you very much, Guilherme! I never imagined that it could be a cookie. All my life the user-agent worked for me. Now I can continue with my work here. Besides having solved the problem for me, it was very complete the answer. I would give two upvotes, rsrs.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.