This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Josh Puckett
Posted Apr 19 - Read on Facebook

Quick update to FramerWebView:

• Toggle iPhone/Android viewers using the controls in the top left
• Quickly change the prototype by entering a URL in the top left.
• Controls fade out when you're not interacting with them
• Hit 'Z' to zoom to 100%

https://github.com/joshpuckett/FramerWebView

12 Comments

Henrique Alves

Hey Josh , just now I'm checking this. Great stuff!

Noah Levin

Cool stuff!

Was just talking with some Chrome folks about this. I kind of feel this sort of stuff should exist at the Chrome level, not the individual prototype level. My proposal was that there should basically be a way to improve the chrome mobile emulator to include phone frames and the bobble, and potentially trigger by default for certain URLs or given a meta tag that hides the inspector.

This would allow anyone to take benefit from this without adding additional lines of code to their prototypes. Just an idea, I'm sure there are downsides too.

Noah Levin

Minor piece of other feedback — I'd consider hiding the hand by default. I think it's a bit over the top / distracting. Option to add it back in with hotkeys as you did with the background seems fine.

Ilter Canberk

This is great. Minor feedback:

The cursor that you've recommended is a little confusing since the click point is actually top left part of the circle. Adding 32,32 after the url can make it better. i.e.:

cursor: url("https://s3-us-west-2.amazonaws.com/tweakapp.co/Framewebview/bobble.png") 32 32, default;

Josh Puckett

Thanks Ilter! Def something on my list, now I can cross that off :)

Noah: Yea, I may make the hand off by default, want to live with it for a bit first. That's awesome that you're talking to the Chrome folks about it. Agree that it would be awesome/ideal if something like this was just built in to Chrome, natively. They're close in terms of features, with mobile emulators, but the experience is still pretty terrible and leaves a lot to be desired.

Michael Hwang

So in my prototypes, I removed the top status bar (signal, time etc) because when I create a shortcut to the home screen, the status bar is visible. But in this viewer, my prototype doesn't fill the screen because it's not showing the status bar. So I'm wondering if I've been doing it wrong all along. Is there a line of code to make the top status bar invisible when I create a shortcut? Great viewer btw. I can't wait to use this. Thanks

George Kedenburg III

Michael Hwang check out this gist: https://gist.github.com/gk3/02339bdda43146a76551 if you add these meta tags to your prototype's index.html it will allow the page to take up the entire screen and fix the status bar issue when you add it to the homescreen.

Noah Levin

Some of us have written iOS web view apps that hide it and also prevent web view bouncing -- I'm sure we'll open source one soon, though you'll need an apple dev license to put it on your phone.

Michael Hwang

Thanks for the response guys. I'll definitely try that in my next proto.

Drew Stock

Noah, any additional info on the web view that prevents bouncing? Also, thoughts on whether hammer.js is the best way to do drag gestures for iOS web views?

Tisho Georgiev

Drew, I've used hammer.js with my prototypes before and it's worked out great. In fact, if you're using it, you can get around your bounce problem by doing this:

Hammer(document.body).on('drag', function(event) {
event.gesture.preventDefault();
});

Drew Stock

Thanks Tisho!

Read the entire post on Facebook