在iphone上无缝缩放网站标题。

我有一个网站（http://ukchina-trading.com/）与下面的头：在iphone上无缝缩放网站标题。

HTML

 <div class='leftImage'> 
      <img src='image/unionjack.png'> 
     </div> 
     <div class='title'> 
      <h1>J Plus Trading</h1> 
      <h2>Briding the gap between China and the UK</h2> 
     </div> 
     <div class='rightImage'> 
      <img src='image/chinawings.png'> 
     </div>

CSS

.title h1 { 
    font-family: 'Droid Serif', Georgia, Times, serif; 
    text-align: center; 
    font-size: 68px; 
    line-height: 65px; 
    padding-top: 60px; 
    margin-bottom: 80px; 
} 

.title h2 { 
    font-family: 'Droid Serif', Georgia, Times, serif; 
    text-align: center; 
    position:relative; 
    top:-88px; 
    left:3px; 
    font-size: 16px; 
    color: #FF3300; 
} 
.rightImage { 
    position:absolute; 
    right: 150px; 
    top: 2px; 
} 

.leftImage { 
    position:absolute; 
    left: 150px; 
    top: 2px; 
}

当该网站是在计算机上查看头被罚款，但当在iphone屏幕上查看时，图像被推到标题上，隐藏它。

什么是重做标题来阻止它的最好方法？

来源

2012-12-24 Jamie Fearon

如果添加了'位置：relative'到'.title'格，并赋予其更高的'Z-索引'，至少标题不会隐藏;） –