1

我有一个现有的 Rails 网站，它在 iPhone 和 iPad 上的渲染效果很差。我无法捏住屏幕并放大或缩小，图像很大并且不在页面上，背景不会延伸到整个宽度。

目前我不需要整个移动站点，但我希望主页自动缩小，以便整个页面在 iPhone 上呈现，并调整大小以自动填满屏幕。另外，我希望用户能够放大和缩小（就像在任何其他网站上一样）。

有没有我可以使用的 CSS hack？一段识别页面的代码正在被 iPhone 访问并根据 X 和 Y 尺寸呈现页面？我可以粘贴到样式表中的东西吗？我想在不支持移动设备的全新视图或 html 的情况下做到这一点。我正在使用 Rails 和 SCSS。

发布的是主页的 SCSS：

.main#home {
    background-image:url(blue-back.jpg); 
    width:100%; 
    position:relative;

    #airplane {
        position:absolute; 
        top:-441px; 
        left:40px; 
        font-size:24px; 
        color:white;

        #banner {
            position:absolute; 
            left:0; 
            top:0; 
            background-image: url(home-banner.png); 
            width:590px;
            height:104px; 
            background-repeat:no-repeat;
        }
        #plane {
            position:absolute; 
            left:587px; 
            top:-19px; 
            background-image: url(airplane.png); 
            width:59px;    
            height:39px; background-repeat:no-repeat;
        }
    }
    #welcome {
        position:absolute; 
        top:-327px; 
        left:0px; 
        padding:31px 39px 60px 39px; 
        background-color:$white;    
        @include border-radius(6px); 
        @include box-shadow(0 0 5px rgba(0, 0, 0, 0.5)); 
        width:440px;

        h2 {
            line-height:1.4; 
            font-size:23px; 
            color:$textfont; 
            text-align:center;
        }
        .button-wrapper {
            position:absolute; 
            width:520px; 
            left:0; 
            bottom:-33px; 
            text-align:center;

            div {
                display: inline-block; 
                text-align: center;
            }
        }
    }
    #bottom-actions {
        text-align:center; 
        padding:30px 225px 60px; 
        display:inline-block;

        button { 
            margin: 0 8px; 
            float:left;
        }
    }
}
#grass {
    height:44px; 
    width:100%; 
    border-bottom:15px solid $white; 
    background-image: url(grass.jpg); 
    background-repeat:repeat-x;
}
#home-over {
    position:absolute; 
    top:-13px; left:22px;
}
#vimeo-video {
    text-align: center;

    .vim-video {
        position: relative; 
        border: 12px ridge #253032;
    }
}
#why-use {
    h3 {
        color:$white; 
        font-family:$lobster; 
        width:100%; 
        text-align:center; 
        padding:30px 0 25px 0; 
        @include text-shadow;
    }
    #why-use-wrapper {
        display:inline-block; 
        width:100%;

        .block {
            background-color:$backgray; 
            margin-right:30px; 
            padding:25px; 
            width:270px; 
            position:relative; 
            float:left; 
            @include border-radius(4px);

            img {
                width:100%;
            }
            h4 {
                margin:8px 0 4px; 
                color:$blue
            }
            p {
                line-height:1.5; 
                color:#333333; 
                font-size:14px;
            }
        }
        .block.last {
            margin-right:0px;
        }
    }
}
4

1 回答 1

1

查看CSS Media Queries，它允许根据屏幕大小应用不同的 CSS。

这是一个使用媒体查询来设置 a 字体大小的 css 示例h2：

@media all and (max-width: 1000px) and (min-width: 700px) {
  h2 {
     font-size: 12px;
  }
}

这是一个很好的概述，其中包含其工作原理的示例。

于 2012-09-27T20:53:04.863 回答