Comments on: iPhone CSS—tips for building iPhone websites

By: Clay Anderson

Clay Anderson — Thu, 20 Oct 2011 15:34:47 +0000

One request: Please don’t encourage developers to disable pinch-zoom! I can’t STAND it when a site has disabled this feature, and I’m unable to zoom in on a small image or section of the page — even on a mobile-friendly template. That use of that feature should be MY choice as the user, not the page’s. I’m annoyed that Apple even provides a way to disable it.

By: fjpoblam

fjpoblam — Tue, 11 Oct 2011 01:53:14 +0000

I had already linearized my design, trashed floats, and taken care of images. All I had left was one item of frustration.

Holy moley! That one little item, “-webkit-text-size-adjust:none;”, saved me hours of grief.

I looked at cognition.happycog.com over and over to try to figure out their trick for beautiful font-sizing. They do some heavy math juggling. This one little item takes care of things for my little site (and for several clients). I surely thank you.

By: MK Web Designer

MK Web Designer — Sat, 06 Aug 2011 15:31:58 +0000

Mobile web design is something we are looking to do soon. Thanks for the tips.

By: Mike

Mike — Tue, 12 Jul 2011 16:44:08 +0000

“Some people don’t agree with browser sniffing, but you need to detect the iPhone somehow”

What the heck else are we supposed to do? There are more and more devices coming out each day!

I, for one, will be browser sniffing until someone figures out a standard way to detect the calling device – which works!

By: John Ryan

John Ryan — Sat, 25 Jun 2011 19:31:49 +0000

Thanks Harry for the PHP code. It will prove to be most useful when I start building my first iphone website. Cheers buddy.

By: Michael

Michael — Sat, 12 Mar 2011 06:08:01 +0000

Thanks Harry! Just what I was looking for! Although, I did notice that Twitter uses a “link” in its that gives the Bookmark Icon a relation of “apple-touch-icon-precomposed.” I’m still learning how to design for the iPhone so I’m not sure how important this information is or not. Any help would be appreciated. Thanks again!

By: Harry Roberts

Harry Roberts — Wed, 17 Nov 2010 18:44:28 +0000

Neil: For that you will need either/or:

An iPad specific media query: This will involve modifying the PHP and the CSS to seek out iPads
Some Javascript: To create scrollable content (other than the viewport itself) on the iPad you'll need some JS to handle the touch event. I think.

By: Neil Snape

Neil Snape — Wed, 17 Nov 2010 18:08:05 +0000

I am looking for a simple solution to change just two parameters in the css in a html site.

I added the

@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:5px;
}
.container {
margin-right: auto;
margin-left: auto;
height: 800px;
position: relative;
min-width: 1280px;

but it doesn’t do what I thought it would. I want scrollable tables on normal browsers and visible overflow on iPads as tables when overflow is hidden requires two finger scrolls , few people know that.

Do I need the detect JS in the head and could I just make a second style sheet if detected?

By: http://%/bvxhuet

http://%/bvxhuet — Thu, 11 Nov 2010 06:57:43 +0000

… track backe bei http://www.greatpinoy.com/account/submit/add-blog/added_11411/ ……

bon , votre blog thème est véritablement merveilleux , je suis recherche pour obtenir un nouveau design pour mon moncler doudoune propre site web , j’aime vôtre, maintenant Je vais à aller chercher le même disposition style !…

By: LasseFernov

LasseFernov — Wed, 27 Oct 2010 14:16:19 +0000

Hi!

I’m doing the first try on adapting my website for iPhone – but i want separate styles. So the iPhone style isn’t an addition to the desktop style, but a totally separate style-sheet. My site is running on Blogspot. Im trying this but it wont work: