1

iPhone と iPad でのレンダリングが非常に悪い既存の Rails サイトがあります。画面をつまんでズームインまたはズームアウトできません。画像が巨大でページからはみ出しており、背景が幅全体に広がっていません。

現時点では、モバイル用のサイト全体は必要ありませんが、ページ全体が iPhone でレンダリングされ、自動的に画面いっぱいになるようにサイズ変更されるように、ホームページを自動的に縮小したいと考えています。また、ユーザーがズームインおよびズームアウトできるようにしたいと思います (他のサイトと同じように)。

これに使用できる CSS ハックはありますか? ページが 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 を適用できるようにするCSS Media Queriesを調べてください。

メディア クエリを使用して a のフォント サイズを設定する css の例を次に示しますh2。

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

これがどのように機能するかの例を含む良い概要です。

于 2012-09-27T20:53:04.863 に答える