I am very new to mobile development so please don't knock me to much for newbie questions.
I think I have the correct meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
From apples site it said use the below tag to allow running in full screen mode but it does not seem to work.
<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
content="yes">
Width and Height are set for Iphone 4S on IOS 8
width: 320px;
height: 480px
I can post the full code if it will help it is very simple 1 page layout header with two buttons, content just text, and a footer with nav icons
The problem as I see it is that it is not full screen and because of this the IOS navigation bar at the bottom cuts off my footer which has an icon menu
I figured it out, the meta tags are correct, you just have to create a shortcut on the home screen by clicking on the up arrow box on the bottom bar in safari and choosing add to home screen. Then launch your app and presto bars are gone. Just browsing to say 192.../yourapp does not work you have to add a shortcut to the homescreen to remove bars
Related
I have a mobile website with two header buttons. In portrait mode on iPhone it works fine. I can push the buttons.
Here is the problem:
When I switch to Portrait mode and try to tap on the buttons the native iPhone address bar shows up. It comes over the header so I cannot push the buttons.
The images show the problem:
After pushing one button you see this:
How can I prevent this problem?
Is there a way to detect i the iPhone browser bar is shown to the user?
Edit: When you use Safari whatever page you are on and turn your phone into landscape orientation and tap too much at the top of the page the address bar shows up. If you page has a fixed header bar you cannot reach it.
Edit: When I make the header position fixed then it turns out that I cannot tap the header buttons anymore when the orientation changes to landscape and the address bar shows up.
Edit: Here is a sample project which I use: http://mobilegwt.appspot.com/showcase/ You can try this on an iPhone and see the effect I showed in the images.
Maybe you should try to add the meta tag to run in full-screen mode :
<meta name="apple-mobile-web-app-capable" content="yes" />
Referenced at this link.
EDIT
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Have you tried adding a padding to the body? All of the fixed header designs have this. The padding to the body is equal to the height of the bar on your site that contains the icons. You can do them inside media queries if it's only on landscape:
/* iPhone 4" screen: landscape */
#media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
body {padding-top:20px} /*your padding*/
}
You can give a try add min-height to your body.
<style>
body { min-height: 505px; }
</style>
This is the source.
I'm practising on a mobile website but I'm encountering two problems.
On my iPhone I'm able to press the button down in the middle of the Safari Browser and use 'Add to homescreen' in order to place an 'app icon' on my iPhone screen between the other apps. When I press the icon of my site, it obviously redirects me to my website and (thanks to a javascript file) hides the browser navigation bars. Though, when I press an 'a href' link on the site, I'm being taken back to the safari browser to open it there.
I think this is because I wrote it like this:
And on my mobile, I'm accessing the site by an IP address.
Is there any way to solve this?
--
The other problem:
When I use 'add to homescreen' in Safari, I'm supposed to give it a name. It's automatically using my 'title' given in the HMTL file. But how am I supposed to give the app an icon? It's currently just using some sort of a screenshot of the website as the icon ..
iphone-app-icon-html-web-app-home-screen-icon
The iPhone Mobile Safari web browser recognizes a special HTML tag that lets you add an iPhone app icon to your HTML application. Here's the syntax that lets you add an iPhone app icon to your web app:
<link rel="apple-touch-icon" href="/my-app-icon.png" />
This HTML link tag with the apple-touch-icon in the REL field tells the iPhone Mobile Safari browser to use this icon as the app icon for your web app.
iPad and iPhone app icon pixel size
To support the higher-resolution iPhone 4, your iPhone app icon should be a 114 by 114 pixel icon. Older iPhones used 56x56 pixel icons (or possibly 57x57), and the iPad uses a 72x72 pixel icon, and the image you supply will be scaled down and work on all of these devices. Here's a quick summary:
iPhone 4 - 114x114 pixels
Older iPhone - 57x57 pixels
iPad (version 1) - 72x72 pixels
If you prefer a little more control of your app icon size, Apple's documentation shows the following examples:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
I am using the StageWebView Class to show html pages inside my iOS app. Everything is working fine except for the scrolling. It allowing the end-user to scroll the entire webview and is showing an unsightly gray background after reaching the end of the pages content.
My question is: Is there a way to disable the scrolling past the content of the page?
I don't think there's a way to do what. The StageWebView uses the iOS default browser which implements this feature (with a different background color, the behavior is the same though).
Did you try with this viewport?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The important part is user-scalable=no which should remove the "scroll bounce" of the iOS browser.
I'm serving a page for phones and tablets. I am using OpenX to serve advertising on there. The advertising should be loaded in an iframe which should be the width of the page. I'm using bootstrap.
I tested things with this code:
<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>
This makes an iframe that's the exact same width as the browser window. Problem is that if I open this on an iphone it will rescale the iframe to the size of the window loaded in it, and that's very unwanted behaviour. It doesn't do it on my desktop, only on the iphone. I haven't tested yet with other smartphones.
Basically what I'm looking for is an iframe that is the same width as the screen (100%) and doesn't rescale when I load a bigger page in it
I'm pretty sure you are looking for the viewport meta tag to control this. Here is a reference that will explain it completely: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Basically you want to drop this code into your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.
Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.
The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).
You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.
I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?
It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
To add an icon:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
To have a startup image:
<link rel="apple-touch-startup-image" href="/startup.png">
To hide the navigation bar:
<meta name="apple-mobile-web-app-capable" content="yes" />
To change the status bar appearnace:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403)
To change the status bar appearnace on iOS 15:
<meta name="theme-color" content="#ecd96f">
Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.