Помощь с мобильной страницей, фиксированный div сверху и iframe ниже - PullRequest
Новая
       0

Помощь с мобильной страницей, фиксированный div сверху и iframe ниже

0 голосов
/ 15 августа 2011

Привет, я ищу помощь в разработке мобильного сайта.Я пытаюсь получить страницу с панелью инструментов в верхней части экрана, на которой есть кнопки «предыдущий» и «следующий», при этом большая часть области просмотра отображает фрейм, содержащий сторонние веб-сайты.

У меня есть несколько проблем при получении этогоза работой.Во-первых, панель инструментов должна быть зафиксирована сверху.Мобильные браузеры изначально не поддерживают фиксированное позиционирование, поэтому я нашел работоспособное решение, в котором я переместил панель инструментов обратно в верхнюю часть экрана с помощью события window.onresize.Я не могу переместить div во время прокрутки, так как мобильные браузеры отключают рендеринг DOM между событиями touchstart и touchend.

Основная проблема, с которой я сейчас сталкиваюсь, заключается в том, что панель инструментов div отображается правильно вверху, хотя iframe увеличенв верхнем левом углу сайта он загрузил.Вы не можете уменьшить масштаб вообще.Вы можете только увеличить масштаб и панорамировать сайт.Вы можете действительно просматривать сайт iframe только в 100% области просмотра, когда он загружен сам по себе.

Вот каркас того, чего я хочу достичь ..

enter image description here

Любая помощь будет принята с благодарностью!

Вот идея кода, который я использую для достижения этой цели.

Есть также javascript, который изменяет верхнее и левое значения css для #wrapperпри прокрутке экрана с помощью события window.onresize. 

<html>
<head>
<meta
     name="viewport"
     content="width=device-width; 
             initial-scale=1;
             maximum-scale=1;
             minimum-scale=1; 
             user-scalable=yes;"
    />
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >

<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 25 февраля 2012

Я уверен, что вы уже продвинулись, но для любого, прибегая к помощи Google, я столкнулся с подобной ситуацией, применив CSS Scale.Перестановка была настоящим кошмаром, но вы можете заставить его работать.Это работает для встроенного просмотра прокрутки, и я предполагаю, что оно будет работать для iframe:

Вопрос / ответ здесь: Масштабирование содержимого HTML с использованием JQuery Mobile & Phonegap

Дополнительно,возможно, стоит взглянуть на ChildBrowser и iframe.Сейчас я экспериментирую с этим, но пока это выглядит полезным:

https://github.com/alunny/ChildBrowser

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 15 августа 2011

Просто подумал, что по-другому сделаю элемент «фиксированной» позиции в мобильных браузерах. Вы можете просто присвоить элементу содержимого высоту и overflow: auto. Убедитесь, что сумма высот фиксированного заголовка и элемента содержимого равна высоте страницы. 

<div id="page">
    <div id="header">fixed header</div>
    <div id="content">...</div>
</div>

#page {
    position:relative;
}

#header {
    position: absolute;
    height: 1.5em;
}

#content {
    top: 1.5em;
    position:relative;
    overflow: auto;
    height: 400px;
}

Пример: http://jsfiddle.net/william/BWA7j/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...