Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iPhone formatted site

J

jakeacc

macrumors regular
Original poster
Jan 28, 2008
185
0
I've been searching the web and this message board for an answer, but couldnt find one.

I have a portfolio site that has a bunch of quicktimes. Unfortunately, they are h.264 and do not play on the iPhone. I would like to create another section of my site that is for iPhone users. Anyone know of a javascript that I can put on my index.html page that figures out whether the viewer is accessing the page from an iPhone, and if so, directs them to the .../iPhone directory on my server?

I am also looking for a template that will be in the proper dimensions for the iPhone. The site will just be some text and a MP4 file.
 
you should use the reference file option in mov's to target specific download speeds.

my mov file looks at 3 files
if its on EDGE then it oads Edge.3gp
if its on WiFi it loads WiFi.m4v
and if its on a pc it loads full.mov

This way you have yourself covered. In terms of size though the iPhone will automatically adjust to the correct size as long as its in the right dimensions (16:9 i think)

Get a copy of MakeRefMovie off the Apple Developers site
 
That might be a problem. If someone is on their laptop connected to a slow WiFi connection, I don't want them to watch the 3G.mov

Also, I need the layout to be different.

This is what my regular site looks like:
http://www.spinningblade.com

That entire page actually loads perfectly on an iPhone and looks decent, but when a user clicks on any of the thumbnails, it opens up a window with an 480x360 H.264 quicktime. (on the iPhone, it just shows the Quicktime logo with a question mark)

For the IPHONE site, i would like the user to be able type in the exact same URL, but be directed to a different page that only has one video, and bigger type.

When I type in amazon.com on my iPhone, it somehow knows that im viewing the page on a iPhone and loads an alternate amazon home page.

Anyone know how they do that?
 
Yes, I'm pretty sure it will play h.264 files that you sync to your iPhone's hard drive, but I don't think it can play them via a website.

Try my site: www.spinningblade.com/reel.html
The videos are saved as the default .mov format and compressed in h.264. I just get the Play symbol with an X over it where the movie window is. I think i can only read .mp4's from a website, no?
 
jakeacc said:
Yes, I'm pretty sure it will play h.264 files that you sync to your iPhone's hard drive, but I don't think it can play them via a website.

Try my site: www.spinningblade.com/reel.html
The videos are saved as the default .mov format and compressed in h.264. I just get the Play symbol with an X over it where the movie window is. I think i can only read .mp4's from a website, no?
Click to expand...

I think it has more to do with the wrapper the video is in as the iPhone does support h.264 even when viewing the videos on the web.
 
Okay, getting the right file format to play isnt the real problem.

What I'm really trying to figure out is how to re-direct the user to an iPhone formatted page. I have a feeling that its something simple as a Javascript code that can figure out whether the browser is on a computer or a iPhone. (detects the mobile iPhone safari browser?)
 
Thanks for the link. I put the following Javascript in the header of my index.html page, but nothing happens:

<script language=javascript>
<!--
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iphone')!=-1);
if (is_iphone) { location.replace("iphone.html"); }
-->
</script>

All I want is for the browser to be redirected to the iphone.html page. Any idea where I went wrong?

Also, I'm still having problems creating a file format that is playable on the iPhone. For videos that I've converted and are currently on my iPhones hard drive, I used Quicktime Pro and exported the movie as "Export Quicktime for iPhone". They all play perfectly on my iPhone. I did the same process for another video and uploaded it to my site. When I type in that video URL path on my iPhone browser, it doesnt play it.
 
Visit your site with an iPhone and use this javascript so you can see what the actual user agent being reported is:

HTML: 
<script language=javascript>
<!--
var agent=navigator.userAgent.toLowerCase();
document.write(agent);
-->
</script>

Then adjust your original code as necessary. BTW, I'd change "if (is_iphone)" to "if (is_iphone) >= 0" in the original code because technically indexOf returns position starting at 0 or -1 if false, and if iPhone was found in position 0 it would fail since 0 = false. Looking at the real world user agent the code would work anyone since iPhone is at position 13 anyway so I'm just sayin'.

My research shows this is the most common user agent to expect:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)

BTW, ultimately you should not rely on a client side scripting language like javascript to do the detection and redirection. Do this via server side scripting in a language your server supports because some people disable JavaScript and they'll slip through. Not to mention accessibility issues.

For Linux shell or Server Side Inlcudes (SSI)
For PHP

-jim
 
I think the issue may be that third line. Try what I have here.

PHP: 
<script type="text/javascript" language="javascript">
//<!--
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf('iphone')!=-1);
if (is_iphone) { location.href = "iphone.html"; }
//-->
</script>
I'm not exactly sure where your files are though. The above code assumes that iphone.html is in the current directory as the page being viewed.
 
It's valid syntax in JavaScript, but for this situation:

The replace method replaces the current History entry with the specified URL. After calling the replace method, you cannot navigate back to the previous URL using the browser's Back button. Source.
Click to expand...

[FONT=arial, helvitica]I didn't question that because maybe the OP wanted that behavior for a specific purpose in context to his site layout and context. The original code used here which came from another example site anyway seems flawed and a little non-standard. I recommend to the OP to not spend much time debugging that JavaScript and simply use the server side methods which clearly make more sense in this situation.

-jim
[/FONT]
 
angelwatt said:
I'm not exactly sure where your files are though. The above code assumes that iphone.html is in the current directory as the page being viewed.
Click to expand...

On my root directory, I have two HTML files: index.html and iPhone.html. I want all regular users to go to index.html, and iPhone users to be redirected to iPhone.html

The only thing in iPhone.html is a video file:
http://spinningblade.com/iphone.html

The video doesn't play, but thats a separate issue.

I'm using Javascript because thats what most of the guides I've read online use. And you can't disable Javascript on an iPhone so it will work 100% of the time for iPhone users. And people who visit the site on a computer shouldn't be affected regardless of whether they disable Javascript or not.

I'll try modifying the code based on your suggestions.
 
Well, I just realized that you CAN disable Javascript on the iPhone. (never noticed that option in Settings)

Ironically, i HAD javascript disabled. So there is a chance that I did have the right code that would have worked if javascript was turned on. I'll have to try it when I get home.
 
Alright, I got the page to redirect to iphone.html. I've also figured out how to properly encode QTs so that they can play in iPhone's Safari browser. (export them as Quicktime MOV with MPEG-4 compresion)

I've got the page to resize/scale properly to fill the iPhone screen. It's looking good...

Update: I've figured out how to hide the Address Bar too. Now its looking like a slick Web App! =)

If any of you have an iPhone near you, please visit the site: www.spinningblade.com

Let me know if everything works okay and if you have any suggestions on improving the interface. The function of the site is just to showcase my work to potential employers and clients. 99% of the time, they will be looking at my site from a computer. (as it was intended) But I have my website URL on several sites and ALL of my emails. If someone happens to click on my email signature from their iPhone browser, having this iPhone formatted site (while limiting) is better than having a non-functioning site. Plus, it's cool to have my friends check out. =P

Thanks to everyone who has helped out.
 
changing iPhone's user agent

Speaking of Iphone interacting with web pages, some sites like applicationmanager.gov refuse access to Safari users. Additionally, as far as I know, Iphone refuses to allow alternate browsers to be installed.

So could the Iphone's user agent string be modified to imitate Firefox, IE, or Opera? If so, how?

Thanks in advance.
 
jakeacc said:
Now its looking like a slick Web App! =) Thanks to everyone who has helped out.
Click to expand...

Only since ya mentioned that, a thought came to mind -- you might consider the iPhone Developer Program and write an iPhone app and distribute through the app store. Cross marketed with your web site, you could make some cool cash and increase hits. No need to reply on this point, just tossin' this out there, welcome to 2008 where anything is possible! But as to your web page and iphone thanks for posting, others I am sure are inspired now to create web apps for iPhones. Great job.

As to your question about user agents and the iPhone -- I looked at alot of sites and it seems the user agent string is compiled from the OS, the firmware and Safari in the new phones so it's not a simple matter of changing a string in a config setting. This is a common question and the only answer I've seen so far is "not without hacking the internal firmware".

Maybe in the future this FireFox emulation for wireless devices (page sometimes renders badly) (which might become an iPhone app in the future) could be adapted, and as we know ForeFox has plugins and one of the popular ones allows custom user agent switching and creation. Until then (no ETA sorry) ----- not a clue!

Unrelated, I also found something cool you might try next time when designing your layout -- it's called iPhoney which shows you how any web page will look on a simulated iPhone. Pretty darned cool!!!!!!!

-jim
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back