1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Mock Mobile View Layout

Discussion in 'General XenForo Discussion and Feedback' started by erich37, Jul 9, 2013.

  1. erich37

    erich37 Well-Known Member

    Since we have several styles here, like e.g. a "Fixed Width Style" and also a "Kitchen Sink Style", etc. ; I was just thinking of having a few styles which would mock of how the website looks like on different mobile devices.

    Not sure if it makes sense or whether it is possible, but it would be cool to select a style here at XenForo.com to see how the website would look like for example on an iPhone.
    So literally make a new style which will have the screen-width of an iPhone in portrait-format and another style having the width of an iPhone in landscape-format.


    So we could sit on our desktop-computer and view how XenForo.com looks like on a small-sized screen.


    Thoughts ?


    :)
     
  2. RobParker

    RobParker Well-Known Member

    A lot of effort for no real gain as there's no such thing as a "mobile" style any more. Resize your browser to iphone dimensions and you have an "iphone style".
     
  3. Jeremy

    Jeremy XenForo Moderator Staff Member

  4. erich37

    erich37 Well-Known Member

    It would not be that much effort to create a new style with just another page-width.

    Yeah, probably it makes more sense to change Browser-resolution-size to "mock" the behaviour.....
     
  5. Jeremy

    Jeremy XenForo Moderator Staff Member

    Chrome also has easily accessible overrides (right click, inspect element. Gear Icon in the bottom, overrides):
    Screen Shot 2013-07-09 at 4.24.16 PM.png

    Changes the viewport width / height to match that of the device you are emulating.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Just resize your browser window.
     
    Divvens and Chris D like this.
  7. RobParker

    RobParker Well-Known Member

    But all the responsive elements work based on your browser window size. Setting the page width to be a certain value isn't the same is it?
     
  8. erich37

    erich37 Well-Known Member

    it would not be exactly the same as on a real mobile device.
    it would just be some sort of "simulation" or "synthetic view", so you could just quickly view it with the exact page-width dimensions and how it would "approximately" look like an an iPhone or Android or a certain tablet, etc.
     
  9. RobParker

    RobParker Well-Known Member

    But none of the responsive elements would react as while your page width might be 300px, your browser window would still be 1000px or whatever.

    I don't know if that's correct but I assume that's how it works.
     
  10. Jeremy

    Jeremy XenForo Moderator Staff Member

    Use the overrides in Chrome. I know Safari has something similar as well (I believe).
     
  11. erich37

    erich37 Well-Known Member

    well, it was just an idea I had.
    It probably does not make any sense at all :D
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Yes, it would.

    This is on my 1920x1080 monitor.

    upload_2013-7-9_21-51-11.png
     
    RobParker and Jeremy like this.
  13. Jeremy

    Jeremy XenForo Moderator Staff Member

    Can you spot the difference? image.jpg Screen Shot 2013-07-09 at 5.05.00 PM.png
     
  14. Russ

    Russ Well-Known Member

    Firefox has a built in responsive view too:

    res.png res2.png
     
    TsuChi, erich37 and Jeremy like this.

Share This Page