масштабирование HTML-страницы с помощью iframe для мобильных устройств - PullRequest
Новая
       19

масштабирование HTML-страницы с помощью iframe для мобильных устройств

0 голосов
/ 10 марта 2012

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

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

Большое спасибо.

1 Ответ

2 голосов
/ 11 марта 2012

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
}

Порядок важен, поскольку браузер будет каскадно уменьшаться с максимальной минимальной ширины до необходимой.

Здесь есть отличные примеры от Криса Койера из CSS-Tricks.com: http://css -tricks.com / CSS-медиа-запросы /

ОРИГИНАЛЬНАЯ ПОЧТА:

Вы можете просто использовать условный CSS, чтобы придать ему особый вид для каждого размера экрана. Есть несколько способов сделать это: с помощью Javascript или HTML (что быстрее).

HTML: в этом примере будет использоваться определенный CSS (в данном случае iPad_Portrait.css), когда устройство имеет более высокое разрешение, чем 481px, но ниже, чем 1024px. Он отлично работает с устройствами 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 для каждого из типов устройств.

...