EDIT:
Я знаю, что я написал это давным-давно, но здесь это лучшее решение для современных браузеров: CSS Media Queries.
Немного похоже на вариант HTML ниже, CSS Medial Queries - это родной подход для оперативного пересчета любых элементов в зависимости от размера браузера.
Я обычно основывают себя на стандартном 980px сайте, и адаптировать его оттуда с помощью этих средств массовой информации запросов:
@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
}
порядок важен, как браузер будет каскадом вниз от максимума мин ширины к одному это необходимо.
Есть хорошие примеры от Криса Coyer из CSS-Tricks.com здесь: http://css-tricks.com/css-media-queries/
ОРИГИНАЛЬНЫЙ ПОСТ:
Вы могли бы просто использовать условный CSS, чтобы придать ему определенный вид для каждого размера экрана. Есть несколько способов сделать это: с Javascript или с HTML (что быстрее).
HTML: В этом примере будет использоваться определенный CSS (iPad_Portrait.css в этом случае), если устройство имеет более высокое разрешение, чем 481 пикселей, но ниже 1024 пикселей. Он отлично работает с устройствами iOS, даже с iPhone 4 и 4S с дисплеями с высоким разрешением. Но не работает вообще с дисплеями с высоким разрешением Android.
<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 Этот пример включает в себя обнаружение браузера, который не всегда надежны, но у меня было довольно хорошие результаты с помощью следующего кода:
<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>
Если поместить этот код в вашей голове, это будет выберите соответствующий файл css для каждого из типов устройств.
Укажите ширину iframe в процентах для ее масштабирования. Хотя я не уверен. –
Я думаю, что для этого есть специальный метатег, но я не могу его найти нигде ... – dario111cro