Question

I have an existing Rails site which is rendering very poorly on iPhone and iPad. I’m unable to pinch the screen and zoom in or out, the images are huge and off the page, and the background does not stretch across the entire width.

At the moment I don’t need the entire site for mobile but I would like the homepage to automatically shrink so that the whole page renders on an iPhone and is sized to automatically fill the screen. Also, I’d like the user to be able to zoom in and out (just like on any other site).

Is there a CSS hack that I can use for this? A piece of code which recognizes the page is being accessed by an iPhone and to render the page according to X & Y dimensions? Something I can just paste into the stylesheet? I wanted to do this without supporting completely new views or html for the mobile device. I’m using Rails and SCSS.

Posted is the SCSS for the homepage:

.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;
        }
    }
}

Answer 1

Look into CSS Media Queries, which allow different CSS to be applied depending on the size of the screen.

Here is an example of css using a media query to set the font size of a h2:

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

Here is a good overview with examples of how it works.