scaling html page with iframe for mobile

Question

How can I scale web page to look nice on mobile devices?

On page I have iframe. Iframe contains html5/javascript game that uses fixed position divs. I want to scale that iframe as well.

Thank you very much.

Answer 1

EDIT:

I know I wrote this a LONG time ago, but here is the best solution for modern browsers: CSS Media Queries.

A little bit like the HTML option bellow, CSS Medial Queries are a native approach to responsively reflow any elements depending on the browser size.

I usually base myself on a standard 980px website, and adapt it from there using these media queries:

@media (min-width: 1920px) {
// Your CSS here
}

@media (min-width: 1280px) {
    // Your CSS here
}

@media (min-width: 768px) {
    // Your CSS here
}

@media (min-width: 0px) {
    // Your CSS here
}

The order is important as the browser will cascade down from the highest min-width to the one it needs.

There are great examples from Chris Coyer from CSS-Tricks.com here: http://css-tricks.com/css-media-queries/

ORIGINAL POST:

You could simply use conditional CSS to give it a specific look for every screen size. There are a few way you could do it: With Javascript or with HTML (which is faster).

HTML: This example would use a certain CSS (iPad_Portrait.css in this case) when the device has higher resolution than 481px but lower than 1024px. It works great with iOS devices, even with the iPhone 4 and 4S with super high resolution displays. But does not work at all with android's high resolution displays.

<link rel="stylesheet" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPad_Portrait.css" type="text/css">

JavaScript: This example involves browser detection which is not always reliable, but I have had pretty good results with the following code:

 <script type="text/javascript">

$(document).ready(function()
{
    if((/iphone|ipod/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE IPHONE SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
            }
    else if ((/ipad/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE IPAD SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    }
    else if ((/android/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE ANDROID SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    }
    else if ((/blackberry/i.test(navigator.userAgent.toLowerCase())))
    {
        // DYNAMICALLY CHANGED THE CSS FILE FOR THE BLACKBERRY SPECIFIC CSS.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    }
    else
        // IF NO MOBILE BROWSER DETECTED, MOST LIKELY IS A COMPUTER, THEN IT DEFAULTS            TO THIS FILE.
        $('#your_css_link_id').attr('href', 'the_name_of_your_css_file.css');
    });
}

<script>

If you put that code in your head, it will choose the appropriate css file for each of the device types.