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

Question

我有一个网站 ( http://ukchina-trading.com/)，标题如下:

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 屏幕上查看时，图像被推到标题上，隐藏了它。

重做 header 以阻止这种情况的最佳方法是什么？

Answer 1

我建议最好的办法是将标志放在网站 900 像素宽度内。

将它们保持在“J Plus Trading”文本的左侧和右侧，但只使用 float 而不是绝对定位。