New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Mobile preview with various screen size options #2557

Open
marcobeltempo opened this Issue Nov 16, 2017 · 5 comments

Comments

Projects
None yet
4 participants
@marcobeltempo
Contributor

marcobeltempo commented Nov 16, 2017

When using the mobile preview option it would be cool to select a specific mobile device that would display the project according to the devices screen size. Similar to the Responsive Design Mode in the web dev tools.

A quick mockup of how it could be implemented:

image

I would love to hear everyone's thoughts on this or if its even possible.

@humphd

This comment has been minimized.

Member

humphd commented Nov 20, 2017

@flukeout thoughts on this? See also #1721

@flukeout

This comment has been minimized.

Contributor

flukeout commented Nov 20, 2017

Hey this is really neat @marcobeltempo! I guess selecting one of these options would end up changing both the appearance and physical size of the devices?

I have some reservations though because a lot of these devices have very wide (in terms of pixel size) screens, so I'm not sure how we would represent that. Our current device is only 310px wide, so how would we deal with an iPhone 6 (medium size) that has a pixel width of 750px.

I think maybe instead of offering a list of specific hardware, we could offer a few simpler options like...

  • Landscape phone,
  • Portrait phone
  • Watch!?
  • Tablet
  • ...any other device types?

Let me know your thoughts @marcobeltempo

@marcobeltempo

This comment has been minimized.

Contributor

marcobeltempo commented Nov 23, 2017

@flukeout ahhh I see what you're saying. Larger devices would end up overflowing.
I think having a general device list is a great idea! Definitely give users a better visual representation

@jgmac1106

This comment has been minimized.

Contributor

jgmac1106 commented Nov 24, 2017

screenshot 2017-11-24 07 58 09

This is a plug in I use (or course I would remove the iphone references so as not to promote inferior phones) when testing display sizes (resizes browser window) maybe just allowing the user to select a few sizes but give them ability to change dimensions
@humphd

This comment has been minimized.

Member

humphd commented Nov 27, 2017

Another thing to consider here is that we can't easily (or convincingly) simulate certain resolutions within the preview, because we're always going to be limited in our available space. Creating a pixel density and width/height scenario for lots of new devices will be hard because it will require creating a viewport that is way bigger than the available space in the live preview view. Whatever we do here, we should probably keep things fitting nicely in that space vs. extending it in unhelpful ways.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment