Weird gray space above page in iOS Safari - iphone

If you go to www.projectjuice.com on an iOS device (running 6+) on the Safari browser, you will see there is gray space at the top while any page is loading.
Once the page loads completely, it shifts up again.
Any ideas why of how to fix it?
Thanks!

Yes it's a apple smart banner. Look in you meta tags after <meta name="apple-itunes-app" content="app-id=myAppStoreID> and remove it or add the correct appStoreId.

Related

How to Make Links Work in WKWebView and how to correctly format words

I am coding a simple app in Xcode and I have ran into a problem. I can not get links to work on the mobile app that go to other links. For example, if I click on the Twitter button at the bottom of the webpage nothing happens, I want that button to lead to the desired link it was supposed to go to. Also, the words in a page on the site are lined up in a vertical column, and I would like to know how to make the text look better in terms on formatting it correctly. Here is a picturePicture Of Simulator The Code
[Image]
Seems like you're adding your WKWebView the right way and the page is loading fine. The problem with the text is actually coming from the CSS of the site as I have the problem in Safari on my phone as well, so if you are the web admin of the site I'd fix it there.
Did you try if the button you are talking about is responsive when accessing through Safari on your phone/simulator? WKWebView does not have a loading bar and it seems "unresponsive" sometimes even though the sites are loading in the back.
When adding your WebView implementation buttons like the privacy policy on the site work fine for me.

iPhone viewport meta tag change on homescreen link

I have a web application that I had previously setup the meta tags needed to support the iPhone with a homescreen bookmark. The website worked fine in safari, and as the bookmark with the apple-mobile-web-app-capable set to yes so it removed the browser controls when you used the home screen link.
Now that the iPhone 5 is out, I realized that with the viewport settings I had on the page it was showing the site with black bars at the top and bottom of the screen. I have since changed my viewport meta tag so that it would use the full screen of the iPhone 5. However the only way for the home screen bookmark to use the new viewport tags and go full screen is to remove the bookmark, and re-add it.
Is there another way to set things up so that everyone that has the homescreen bookmark already installed will not need to remove, and re-add it for the site to go full screen?
This is the solution I found by Burlin on Gist. Works a treat. https://gist.github.com/3840737
<!-- standard viewport tag to set the viewport to the device's width
, Android 2.3 devices need this so 100% width works properly and
doesn't allow children to blow up the viewport width-->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<!-- width=device-width causes the iPhone 5 to letterbox the app, so
we want to exclude it for iPhone 5 to allow full screen apps -->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />

iPhone APP to connect to a website without browser bars

I need to create an APP and all I know is web coding for mobile devices.
Nor do I have a Apple Computer to write the code.
What is the code to display a loading screen and then load in a mobile themed website without the url bar and the bookmark bar?
Is there a tutorial on this?
In the head of your HTML:
<meta name="apple-mobile-web-app-capable" content="yes">
It will only affect users who add the page to their home screen, though.
For the splash screen:
Your startup image must be 320x460 pixels.
Further details at: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Is it possible to hide the iOS browser chrome on a website and link to an external site?

Is it possible to build a website that is hiding the browser chrome on iOS5 while still linking to external websites? The browser chrome should not be shown when the external site his opened.
This is only possible when the website is added to the home screen and contains this meta tag:
<meta name="apple-mobile-web-app-capable" content="yes" />
You can't hide the chrome from the Safari app itself.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top no on a # target, fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.

Adding Icon on desktop of iPhone

I want to place an icon on the iPhone screen form my application, like placing an icon and if i will touch that icon it will do the desired operation, like opening a sound file or an image.
So i want to ask is it possible to place an icon on screen through an application and do some events on it.
Regards,
Vishal
You can't do that. The only icon that will appear on the iPhone home screen will be the icon for your application itself.
Edit:
Expanding on the web shortcut idea suggested by Gene, it might be possible you achieve what you want by having a web short cut using a specific protocol handler to open your app with a web short cut added to the home screen. Take a look at this article:
http://www.mobileorchard.com/apple-approved-iphone-inter-process-communication/
I believe that would still require the user to add the shortcut though, I don't think a third party app can add web shortcuts.
I found it annoying that google maps cannot be page bookmarked onto the home screen. Here is an almost quick solution:
Create a Tiny URL of the target Google Map. SF Bay Area Traffic is http://maps.google.com/maps?hl=en&ie=UTF8&ll=37.55111,-122.121277&spn=0.810034,1.182404&z=10&layer=t
Mail yourself the Tiny URL.
Select the URL in the email application.
Before Safari realizes that it is a Google Map url, touch the x on the url line to cancel the transfer to the Google Map App.
Touch the + at the bottom of Safari and touch "Add to Home Screen"
Name it appropriately and, there you have it, a Google Map entry on your home screen.
Andynormancx is correct. The only exception to this rule (that I know of) is a web shortcut -- within Mobile Safari, you can select "add to home screen", and a shortcut to the bookmarked page will appear on Springboard. The icon is a partial screenshot of the web page.
I don't know if this would be useful to you, though I suppose you could bookmark a link to a sound file or image.
What you can do is create an application and under ApplicationDidLoad in your ApplicationViewController.h
You would type in your code. (If you don't have the SDK, then don't post the question with the tags iPhone-SDK and Cocoa.)
In addition to Gene's answer, you may want to set the following meta tags:
<link rel="apple-touch-icon" href="https://path/to/icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />