i have a mobile website i am converting from a desktop site but have some unwanted white space that i cannot seem to remove. Its either padding or margin somewhere but i cant track it down.
Is there a way to the same as firefox's inspect and see exactly what styles affect what?
The site is being made via media queries and i cannot find any emulators that work with this.
Thanks.
Using this meta view port should be the correct width for iphones right?
<meta name="viewport" content="user-scalable=no,width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Do you want to see your website source?
if you use Google Chrome you can add view-source: before any URL that you want to see it's source.
For example:
http://www.google.com shows you Google website and view-source:http://www.google.com shows you Google website source.
Note: maybe it work on other browser but I didn't test it.
What do I mean is that I want to use the app to create a shortcut with icon on the desktop which will allow user to speed access some functions of this app.
How could I do that, any suggestions? Or anyone have experience with this.
An example:
FaceDial
I spent a good while trying to implement this functionality into an app recently and wanted to put out some of the resources I found on the subject to save someone else a major headache. This is becoming an increasingly popular feature and is used in major apps like Workflow and Facebook's Groups app. Given that Workflow is now an Apple app, it doesn't look like Apple has any issues with using this technique either. The answer provided by #jin is essentially correct. The process looks something like this:
Register a custom URL scheme for your app. Create dynamic URL links that, when followed, lead to content you wish to shortcut to. The only way currently to add a shortcut to the iOS springboard is via Safari's "add to homescreen" function. So what we want to do is use Safari to save our custom URLs that lead to our app to the springboard. The trick is, you can't just send your URL to Safari and save it because doing so will cause Safari to immediately follow the link and the user will never have a chance to hit "Add to homescreen". So to circumvent this issue you'll need to host a web-service somewhere that takes your URL and returns a base64 URL which your user can save to the homescreen.
To create this webservice you can either host it remotely,which will require your user to be online to use, or embed one into your app, which is what Workflow and Facebook Groups does. For embeded servers theres some great fairly easy to use options. If you're using objective-c theres CocoaHTTP and if you're using Swift I'd recommend Swifter, which is what I used.
Your webserver will need to display a page which returns another page in an base64 encoded format so that the user can use the shortcut after the webserver stops running (obviously you can't leave the embedded server running 24/7). The encode page will need to detect if the page was launched in standalone mode. If it was, then it should take you to your app, otherwise it should present you with a page where the user can save the page to the homescreen. Here's a sample of how my html looked for the service:
<!DOCTYPE html>
<html>
<div id="html">
<!DOCTYPE html>
<html>
<head>
<title>Add to Homescreen</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" name="viewport"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="SHORTCUT NAME HERE" name="apple-mobile-web-app-title"/>
<link rel="icon" type="image/png" href="data:image/png;base64, ICON IMAGE DATA"/>
<link rel="apple-touch-icon" href="data:image/png;base64, ICON IMAGE DATA"/>
<link rel="apple-touch-startup-image" href="data:image/png;base64, ICON IMAGE DATA"/>
</head>
<body>
<a id="redirectURL" href="YOUR CUSTOM URL" name = "redirectURL"></a>
<script>
if (window.navigator.standalone) {
var e = document.getElementById('redirectURL');
var ev = document.createEvent('MouseEvents');
ev.initEvent('click', true, true);
e.dispatchEvent(ev);
window.close();
} else {
document.write("<center><h1>Valet</h1><img id=\"imageIcon\" src=\"data:image/png;base64, IMAGE ICON DATA\"></img><h2> Add this page to your homescreen </h2></center>")
}
</script>
</body>
</html>
</div>
<script type="text/javascript">
var html = document.getElementById("html").innerHTML;
html = html.replace(/\s{2,}/g, '')
.replace(/%/g, '%25')
.replace(/&/g, '%26')
.replace(/#/g, '%23')
.replace(/"/g, '%22')
.replace(/'/g, '%27');
var dataURI = 'data:text/html;charset=UTF-8,' + html;
window.location.href = dataURI
</script>
</html>
Here's a list of resources on the topic that helped me out (Sorry, I don't have enough reputation to include more than 2 links... so you'll have to copy pasta these):
Great example of how the web-service works with a live demo: https://gist.github.com/FokkeZB/5899387
Another stack overflow question describing the process:
https://stackoverflow.com/questions/28042152/link-to-safari-add-to-home-screen-from-inside-app
Great javascript widget for prompting the user to hit "Add to homescreen" once in Safari:
http://cubiq.org/add-to-home-screen
Apple's documentation on custom URL schemes:
https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html
Apple's documention for built in schemes, which will be better for shortcutting simple task i.e. sending an email:
https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html
Example showing how to base64 encode your HTML in Javascript:
https://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascript
Let me know if anyone has any questions!
You can not add icons to the 'desktop' (Springboard) other than your application's. What this app is doing is displaying a replica of the iPhone 'desktop' within their app.
UPDATE: The link now points to an app which does this and it seems it is somewhat possible although rather hack in my opinion.
This is how I believe the application works (it is similar to answer
below but in more detail).
The application creates the webclip image and sends it and the phone number to a web service.
The web service then creates a page with the webclip information attached. The phone number/email is converted to a url which will trigger the corresponding app (Mail/Messages/Phone). i.e "+834 895 734" -> tel:834895734 or sms:834895734
The app then opens that page in MobileSafari and that page
presumably has instructions on how to "Add to Homescreen".
The user will then have to navigate to and tap the "Add to Homescreen" button. This will add the webclip to the Springboard as an icon.
When tapped the webclip activates the url and the Mail/Messages/Phone is launched with the number/email
You could implement something similar (although I wouldnt suggest it). These are the steps to follow:
Register your own url scheme
Host a page somewhere which contains a webclip for each function/url you want a shortcut for. If the urls are not static or you want dynamic icons, you will need a web service.
Handle the url in your application in this AppDelegate method
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
Note: If your application is deleted, the webclips will no longer work and will confuse the user. Apple may also reject your app.
I guess the application works as follows,
1) It just creating a html for each contact
2) It using the safari functionality "Add to home screen"
Found an excellent answer for simulating the safari functionality,
I created an link from Safari using the "Add To Home Screen" button. It created a directory called 54C86B09482D4560BAB46091CC75825A.webclip inside of /private/var/mobile/Library/WebClips/. That directory contains two files, icon.png and Info.plist. icon.png is simply the icon that gets shown when looking at the apps screen.
The contents of Info.plist are where the real information is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>ClassicMode</key>
<false/>
<key>FullScreen</key>
<false/>
<key>IconIsPrecomposed</key>
<false/>
<key>IconIsScreenShotBased</key>
<true/>
<key>Scale</key>
<real>0.32653060555458069</real>
<key>ScrollPoint</key>
<dict>
<key>x</key>
<real>0.0</real>
<key>y</key>
<real>-183</real>
</dict>
<key>Title</key>
<string>The Daily WTF</string>
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleGray</string>
<key>URL</key>
<string>http://thedailywtf.com/</string>
</dict>
</plist>
So, to test this out I created a new folder called C28C8FDC2F184AAD84F77B511442548F.webclip and copied the Info.plist file over from the other directory, edited the url to http://google.com. I then re-sprung the phone and it showed up just like any other webclip. The folder name is simply a hex encoded GUID, I used http://www.somacon.com/p113.php and just selected what was after 0x for this simple test
I have an iPhone web app I am trying to write.
<meta name="apple-mobile-web-app-capable" content="yes">
This works fine and I can add it as a web app on my homescreen. I am trying to get it to cache the app so that it can work offline.
<html manifest="cache.manifest">
<?php
header("Content-type: text/cache-manifest");
?>
CACHE MANIFEST
index.php
img/arrow.png
img/back_arrow.png
(I can't edit the .htaccess so I'm using php to get the write content type)
The page caches fine on mobile safari and I can access it without an internet connection. However, when I add it to the home screen and then disconned the internet (using airplane mode) the app says "[app] could not be opened because it is not connected to the internet."
Where should I look to find out why it works fine in mobile safari but not as a web app?
I have a mobile application that I am building, it is made to support Android, iPhone and probably Blackberry. Most of the CSS and formatting is coded on a 1024px. I have formatted the site using an iPhone because it was in hand. After trying the site on an Android, the site seems to load as if the phone believes it is a full screen. So I only see a part of the page.
I use this line to have the app load correctly on the iPhone:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Are there any methods for Android? If I remove the user-scalable=no I can double tap the Android screen and it will be the correct size, but ideally that isn't how the site should load.
Facebook is having allot of JavaScript issues at the moment in Internet Explorer (IE 9), however by clicking the IE 8 Compatibility Mode button, or by switching to IE 8 Compatibility via the Developer tools you can get rid of all the JavaScript errors.
My apps are using the newer iFrame method, I have tried the following tags:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
Neither seemed to switch the parent frame into the correct mode (document.documentMode != 8), is there a way to force IE 9 into Compatibility mode for the whole site (facebook.com) from within a iFrame either via JavaScript or some undocumented method?
Not unless you have control of the site.
You can have a look at compatilbility-view
In a web application where I had access to the server, I added a custom HTTPHeader entry for the target web site:
Custom Header name: X-UA-Compatible
Custom Header value: IE=EmulateIE7
In order to force IE8 to behave like IE7, and it worked well.