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.
I would like to write a web application that behaves identically to transmission's (the BitTorrent client) web interface.
If you exit the web app, and then access the application switcher, transmission's icon is there.
All of the typical meta tags for ios web apps are leaving me with safari's icon in the app switcher.
Any ideas on how to achieve this behavior?
If you take a look at the web app source code you can see what it's doing.
The magic sauce is
<meta name="apple-mobile-web-app-capable" content="yes" />
and
<link rel="apple-touch-icon" href="./images/webclip-icon.png"/ >
All of this is documented in the Safari Web Content Guide
I have a multi-page website that is designed to work as a web-app on an iPhone.
It has the usual:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-startup-image" href="/images/startup.png" />
The site doesn't use Sencha or Javascript to navigate between pages, just standard anchor links, and page-reloads (I'm aware that the standard approach to web-apps is to use a Sencha-like interface).
It works perfectly fine when launched from the iPhone homescreen, and works the same as when viewed through Safari.
An issue seems to arise, though, when a phone call is answered mid-session.
Once the call is complete, the iPhone (version 4 in this case) reverts back to the web-app, but instead of restoring the previously-viewed page it reloads the homescreen (the same page that is loaded when the web-app is initiated)
When viewing the site in Safari, and accepting a call, it doesn't do this and maintains the url and current session values.
Is this a known issue in web-apps? Is there a workaround?
(one idea I have is to maintain the session and url values in a local SQLite database, but I'm not sure if this is the best approach)
The trick is to do this:
// Start or resume session
session_start();
// Extend cookie life time by an amount of your liking
$cookieLifetime = 365 * 24 * 60 * 60; // A year in seconds
setcookie(session_name(),session_id(),time()+$cookieLifetime);
I tested this to work on iOS 4.2.1, 5.1.1, 6.0 and 6.1. The session is even restored after turning off and restarting the device.
For a more elaborate discussion of this strategy you can take a look at my answer of this question:
Maintain PHP Session in web app on iPhone
Instead of storing the login info in a $_SESSION variable, store it in a $_COOKIE. The cookie will be saved depending on when you set it to expire. As long as they log in "inside" the web app, or the regular web version (and the cookie is the same) they will not have to log in every time or when switching between the two.
I haved the same problem with my WebApp under iOS v10. It was not a problem of session and / or cookie (session mecanism was OK, based on a cookie with suffisant lifetime).
The problem is when running in WebApp mode (i.e. application launch from a desktop shortcut, not whithin Safari), the "context" is lost when switching to another app (for example answer a call). When you come back to the app, the requested URL is not the last one, but it is the URL saved into the desktop shortcut...
In my case, the shortcut was made from the login screen , so every time I switched back to my app from another app, it was the /login URL called... It looks like I was logged out...
So be careful of the URL shortcut on your web app.
At this point, I have not found a way to specify a specific URL when the user create the shortcut.
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 am new to web apps. I read just about everyting of Apple's website about creating web apps for iphone but could not find any info on how do you create an icon that would be placed on user's phone that would launch the app.
I mean, is it possible to have an icon added to the iphone/ipad for a web app that would launch your web app the same was it launches the regular app?
See the Apple documentation on web apps,
Basicaly use:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
(put it in your <head>)
If you don't want the shiny effect added to your icon use:
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />