Why is my table blurry?

I am creating an HTML5 iPhone app when I came across a problem. As you can see in the following picture, everything is blurry.

Here is a normal page of the website:

I have tried using -webkit-transform: translateZ(0); in my css, but that doesn't make it 开发者_运维知识库look sharp and crisp like the second image.

How can I make the text (and table) sharp like the second image?

This is a guess, but it looks like Mobile Safari may be scaling your table to fit the screen. (If you can pinch-and-zoom your way to sharper and crisper text, that's a definite sign.) Try using the tag <meta name="viewport" content="initial-scale=1.0"> to set the scaling factor and see if it makes a difference.