2012-03-10 3 views
0

Как я могу масштабировать веб-страницу, чтобы хорошо выглядеть на мобильных устройствах?масштабирование страницы html с iframe для мобильных телефонов

На странице у меня есть iframe. Iframe содержит html5/javascript игру, в которой используются фиксированные позиции div. Я хочу масштабировать этот iframe.

спасибо.

+0

Укажите ширину iframe в процентах для ее масштабирования. Хотя я не уверен. –

+0

Я думаю, что для этого есть специальный метатег, но я не могу его найти нигде ... – dario111cro

ответ

2

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 для каждого из типов устройств.

Смежные вопросы