1

Well, my question is rather short: Is it somehow possible to fake a mobile environment in order to display a preview of a mobile version of a view inside a regular web browser?

I couldn't find anything - but maybe I just can't figure out the right keywords for an effective search. On the other hand it could also be that this is simply not possible.

Please note: I am not talking about a developer console. What I want is to embed a widget onto a life website. The use case is a user who can update information, add images etc. and what I want is to provide a mobile preview to the user.

Stefan Falk
  • 23,898
  • 50
  • 191
  • 378

1 Answers1

0

Alright, I think the best way to do this would be using iframes. But there is something that needs to be taken into consideration. Your media queries cannot be targeting devices so no max-device-width but max-width here is why

Lets say you want to simulate how your website would look like on a phones, your media queries need to look a bit like this

 @media only screen and (min-width : 320px) and (max-width: 400px){ {
    /*Your rules here*/
}

And your iframe for that media query would need a width of anywhere between 320 and 400 pixels

Community
  • 1
  • 1
realappie
  • 4,656
  • 2
  • 29
  • 38