web app CSS trouble

I'm trying to present my notecards in a web app style. I'm not worried about caching, o开发者_开发百科r making it work offline.

I just want it render well in the iOS browser. Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3

I want it to look the same as if you re-size your browser window to 320x480. The problem is, it always renders a huge amount of blank space off to the side. I want to lock the scrolling to only the vertical axis (like flipping through notecards), but also have the text at a readable size.

You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.

As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.

Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)

Reading your question again, here's some suggestions based on what I think you're looking for.

1. Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.

2. If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)

3. You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.

4. Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.

Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.

This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.

Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.