mobile safari

iPhone and iPad JavaScript dialogs (alert, confirm, prompt) and windows

iPhone JavaScript dialogs FAQ: Can I use JavaScript windows and dialogs in my iPhone HTML app (the JavaScript alert dialog, confirm dialog, and prompt dialog)?

Yes you can. According to Apple's iOS Safari web documentation, you can use "iPhone JavaScript windows and dialogs" that are supported by iOS. Here's how.

By Alvin Alexander on March 8, 2013

iPhone Safari debugging console (iPhone/iPad web app debugging)

iPhone HTML web app debugging - I'm trying to optimize my HTML/web application to look and feel like a native iPhone app; how can I debug my web app on an iPhone or iPad (presumably using Safari)?

By Alvin Alexander on October 8, 2012

iPhone user agent - Use JavaScript to detect the user agent

iPhone 'user agent' FAQ: I'm trying to optimize my HTML/web app for the iPhone; how do I detect an iPhone, iPod, or iPad browser in my web application?

This Apple page shows the iPhone, iPod, and iPad user agent strings, so you just need to write some JavaScript that properly parses those iPhone/iPad browser user agent strings.

By Alvin Alexander on October 17, 2012

iPhone HTML apps - Conditional iPhone style sheets

iPhone HTML web app style sheets FAQ: I'm trying to optimize my HTML/web app for the iPhone, how do I specify a style sheet to be used for just the iPhone?

There are several different approaches you can take, but with CSS3 the most direct approach you can take is to add an expression to your iPhone CSS link tag, as shown here:

By Alvin Alexander on October 8, 2012

iPhone HTML apps - Using an app startup image (app splash screen)

iPhone HTML apps startup image FAQ: How do I set the startup image (splash screen) for my iPad or iPhone HTML app?

This quick blurb from the Apple developer documentation leads us to the answer:

On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline.

By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a "link" element to the webpage.

By Alvin Alexander on October 8, 2012

Setting an iPhone HTML/web app icon | iPhone app home screen icon

iPhone HTML app icon FAQ: I'm creating an iPhone HTML web app, and I want users to be able to save my HTML app icon to their iPhone home screen; how can I add a custom iPhone app icon to my web application?

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:

By Alvin Alexander on October 8, 2012

iPhone HTML apps - Status bar control (color control)

iPhone HTML apps status bar FAQ: When creating an iPhone web app so it looks more like a native iPhone app, how can I control the iPhone status bar color?

Once you've removed the iPhone Safari browser URL bar, the next thing you can do to make your HTML web app look more like a native iPhone app is to control the iPhone status bar. The status bar is the bar at the top of the iPhone screen.

By Alvin Alexander on October 8, 2012

iPhone HTML app full screen mode - How to remove the URL and button bars

iPhone HTML web app FAQ: In an HTML web app optimized for the iPhone, how do I remove the URL bar on top of the iPhone Mobile Safari web browser so I can show my HTML app in full screen mode?

When you're creating an HTML/web app to look like a native iPhone app, one of the things you'll want to do is remove the URL bar in the Mobile Safari web browser. This is the URL bar on the top of the iPhone browser, and by getting rid of it, you can display your web app on the iPhone in full-screen mode.

By Alvin Alexander on November 26, 2012

Setting iPhone HTML app page width/size (pixel width)

iPhone HTML page size FAQ: In an HTML web app optimized for the iPhone, how do I set the page size to be the optimal iPhone page size (iPhone page pixel width)?

By default the iPhone assumes HTML pages are 980 pixels wide. When you're creating a custom iPhone HTML app, you really want to control this page size so your web app will look better.

The way you change the iPhone HTML page size (pixel width) is to use the special iPhone HTML "viewport" meta tag, like this:

By Alvin Alexander on October 8, 2012
Syndicate content