How to develop web page for iPhone

seb481

seb481

New Member
Silver
Aug 3, 2007
774
1
0
San Diego
I have my own little webpage (http://www.ipodmediaselection.com/mobile.php) where I display my favorite feeds so I can read news without having to go to 6 different websites.

The text goes in a 309 pixel wide table. I thought this would give me a good browsing experience by avoiding the screen to go left and right when I scroll down.

Unfortunately, it doesn't work well. I mean, I can view the text and everything but if I don't scroll down perfectly, the page will bounce left and right.

I know some websites out there have it all figured out (they let you scroll up and down, but you can't go left and right).

Do any of you guys know how I should program my page so it goes only up and down and NOT left and right at all? Does that even make sense to you?

For a perfect example of what I mean, go to my page with your iPhone. See how you can go left and right? I don't want this.

Now, from your iPhone, go to ronpaul2008.com or T9space.com. See how you can't go left and right? That's what I want!

Any help would be greatly appreciated! Thanks
 
420greg

420greg

New Member
Silver
Jun 26, 2007
845
0
0
Orlando, Florida
sebefore81 said:
I have my own little webpage (http://www.ipodmediaselection.com/mobile.php) where I display my favorite feeds so I can read news without having to go to 6 different websites.

The text goes in a 309 pixel wide table. I thought this would give me a good browsing experience by avoiding the screen to go left and right when I scroll down.

Unfortunately, it doesn't work well. I mean, I can view the text and everything but if I don't scroll down perfectly, the page will bounce left and right.

I know some websites out there have it all figured out (they let you scroll up and down, but you can't go left and right).

Do any of you guys know how I should program my page so it goes only up and down and NOT left and right at all? Does that even make sense to you?

For a perfect example of what I mean, go to my page with your iPhone. See how you can go left and right? I don't want this.

Now, from your iPhone, go to ronpaul2008.com or T9space.com. See how you can't go left and right? That's what I want!

Any help would be greatly appreciated! Thanks
Click to expand...
Go to one of the pages you like with your computer browser, right click, and view source to see how they did it.

I am thinking it is all done with javascript or css.
 
N

NMprofessional

New Member
Bronze
Aug 1, 2007
45
0
0
Rochester NY
sebefore81,

I hope it was okay with you. I have made a few changes to your site and posted it here on my server-space. When you want, just say the word and I will delete it from my server.

Go to
http://www.visionarypartnerships.com/mobile.html
and test it. I tested it from my iPhone and it works as you want it to.

Basically the Javascript in <head> creates the width of 100%. I changed the font size to a bigger size for readability. And in your first <table> label I set to "table1" for the Javascript call.

For more info you can go here
http://www.w3schools.com/htmldom/prop_table_width.asp

If you need help again, please feel free to contact me.

Dave
 
seb481

seb481

New Member
Silver
Aug 3, 2007
774
1
0
San Diego
NMprofessional said:
sebefore81,

I hope it was okay with you. I have made a few changes to your site and posted it here on my server-space. When you want, just say the word and I will delete it from my server.

Go to
http://www.visionarypartnerships.com/mobile.html
and test it. I tested it from my iPhone and it works as you want it to.

Basically the Javascript in <head> creates the width of 100%. I changed the font size to a bigger size for readability. And in your first <table> label I set to "table1" for the Javascript call.

For more info you can go here
http://www.w3schools.com/htmldom/prop_table_width.asp

If you need help again, please feel free to contact me.

Dave
Click to expand...
Hey! Thanks SO much for your help. I really appreciate it. What I did is that I copied/pasted your html back to a page hosted on my site and updated the feed reader. I don't mind you keeping this page up on your server, these are just news feeds that may not be really helpful to many people (many of these feeds are in French...).
I don't know much about web programming so even though your instructions are really detailed, it doesn't mean much to me... I wouldn't have been able to do it without you showing me the way.
Thanks again! :laugh2:
 
B

bingo

New Member
Nov 20, 2008
1
0
0
One of the viewport controls can do it.
I grabbed: <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Then I fiddled and went with: <meta name="viewport" content="width=320,user-scalable=no" />

The removal of the scale info stopped the sideways bounce
 
You must log in or register to reply here.
Top Bottom