scaling html page with iframe for mobile - html

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.