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

What is Framer? Join the Community
Return to index
Vilius Paulauskas
Posted Aug 10 - Read on Facebook

Hey guys, what is the best way to preview a prototype on an iPhone? I've added "apple-mobile-web-app-capable" meta tag to index.html and saved the page to my home screen, but I'm still having two issues:
1. The status bar (clock, battery) is still showing up
2. My prototype uses larger images than viewport and I can't make the overflown content to be hidden (tried setting the viewport, added CSS to #FramerRoot to force 640x1136 size)
Any tips appreciated
V

9 Comments

Benjamin Den Boer

This:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi, user-scalable=no, minimal-ui">

and

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

..should help - but you can't completely hide the statusbar yet on iOS7. Have you tried setting overflow:hidden to the html, body & #FramerRoot? If you set the overflow to hidden and set the width and height properties to 640x1136, you should get pretty close. :)

Rafael Puyana

Here is my method:

1. Work inside a Dropbox folder in the DB's public folder.
2. Get the public link from the index.html file ( Rename the <title> tag to something related to your content )
3. Open that link in IOS Safari ( I usually short URL it with the goo.gl extension and scan a QR code with my phone )
4. From mobile Safari, add your index.html to the homescreen as a web app view. It will create an icon in your homescreen named with the html <title>
5. Once you open that file, the only visible element will be the top bar.

If you have html links pointing to other URLs implement this .js > https://gist.github.com/kylebarrow/1042026

Florian Pnn

On my side I'm using Cordova as am empty shell and import the Framer's file in it. Works like a native app!

Edit : I'll try to share my shell script that do that automatically and launch the app on the simulator :)

Vilius Paulauskas

Thanks, worked like a charm! Looking forward to share something with you ;-)

Rafael Puyana

Florian Pnn do you have some links to tutorials for doing that?

Jon Soini

Thanks guys, another person here eventually going this route for an iPad prototype - this'll make my life a bit easier.

Florian Pnn
Rafael Puyana

Thanks man !

James Muirhead

Re: status bars: You can't remove, but you can change the text color to black with this trick from Flinto - http://blog.flinto.com/how-to-get-black-status-bars.html. Then I use the following little piece of code in the app.js file or in the Framer Studio editor:
if utils.isMobile == true
layerName.visible = false

Read the entire post on Facebook