I have how would i only target iphone? I have tried
media="handheld, only screen and (max-device-width: 480px)"
but it wont display my menu?
I have two menus - one for web browsers and one for mobile web. Im guessing as iphone only reads the 'screen' type that is why it is displaying. I have specified in my main site css not to display my mobile menu and in my mobile style sheet I have specified not to display the web navigation?
Any ideas?!
Link to my site is www.therisingsuntarporley.co.uk
Thanks
The code for targeting iPhone looks right (see How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing? for some improvements). However, iPhones will display both the regular stylesheets and the mobile-specific ones. To show the menu, you need to add display: block; to the .menu element in mobile.css.
Related
Is it possible to hide (completely remove, not change the styling) the iOS Safari status bar in a homescreen web app?
When you browse a webpage in Safari in a landscape mode the status bar disappears together with the rest of the browser chrome after starting to scroll.
The web app that I'm adding to the homescreen if fitted to the size of the display so is no scrollable.
After setting:
<meta content='initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='white-translucent' name='apple-mobile-web-app-status-bar-style'>
All the browser chrome is gone, but the status bar information is still overlaid over the top of the page regardles of the screen orientation. Is it possible to hide it?
There is no direct method for this (see: similar question) but... this link seems promising:
Everything Hybrid Web Apps Need to Know About the Status Bar in iOS7
The summary of the link is as below:
Key Comments (at link):
When viewing sites in Safari you do not have the ability to customize
the status bar in any way. Previous versions of iOS offered the
ability to view sites in full screen mode, but that was removed in
iOS7, see
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review.
Key Notes (in link):
StatusBar Cordova Plugin
With iOS7 Apple introduced some native Objective C APIs to control the
status bar. Because of Cordova, we have the ability to bridge these
native APIs directly into JavaScript APIs.
Luckily for us #shazron has already done this with the StatusBar plugin.
After adding the plugin to your application, you are given a StatusBar
object with a number of methods to manipulate the status bar in
JavaScript directly.
...
You can hide the status bar using StatusBar.hide(), or even change its
background color with StatusBar.backgroundColorByName() or
StatusBar.backgroundColorByHexString().
For example, the following sets the status bar to green.
<script>
document.addEventListener('deviceready', function() {
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByName('green');
}, false);
</script>
...
Outstanding Issues
While the web has come up with workarounds for most of the iOS7 status
bar issues, there are still a few that remain unresolved.
The status bar still overlays content displayed in a cordova InAppBrowser.
There is no known workaround, but a fix is slated for cordova 3.2.
The StatusBar plugin does not work in apps that lock the device into landscape mode.
Key Critic Comment (at link):
These solutions seem to be working only for Phonegap applications, for
us who don't use this and simply wrap our apps in a webview it seems
the only easy solution is to set the webview's top property to 20
instead of zero and that takes care of the issue at hand.
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 prompt the user if they want to save a URL to their desktop (as a desktop shortcut icon) on the iphone or android? I've seen this in the google calendar on the iphone... a little prompt slides up from the bottom of the screen asking if you want to install the google calendar app, but I'm pretty sure it's just a google calendar desktop shortcut.
The best solution I've found for iDevices is the Mobile Bookmark Bubble found here: http://code.google.com/p/mobile-bookmark-bubble/
This is a small javascript library that adds a pop up bubble at the bottom of your iDevice screen and points to the '+' button.
I haven't found a good solution for Android since there are so many steps. If anybody finds one, please let me know.
Add:
<link rel="apple-touch-icon" href="...">
to the HEAD element of your document.
For more info, check out this thread:
What size should apple-touch-icon.png be for iPad and iPhone 4?
This plugin might be a good solution:
http://cubiq.org/add-to-home-screen
I am building a web application that is to be run by adding the app to the home screen. Currently it has a list of users, clicking on a user takes you to a detail screen for that user and on that screen is a notes link to take the user to another screen with a grid of notes and a text box to add more notes.
When any links are clicked/tapped, the link is opened in Safari, not the current full screen Safari instance. I tried setting the target of the link to _self, but this had no effect.
Any ideas?
I learned a full screen iPhone webapp can only be a single web page. Any link you try to open will launch Safari instead of replacing the current page. To combat this, I used asp.net postbacks with panels to hide/load/show requested data.
I use target="_webapp" and it works just use for example <a href="http://your.link" target="_webapp"> and it gonna open the link without exit landscape (full screen) i dont know why but with some of my webapps works and sometimes dont.
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" />