Ширина браузера Android увеличена до ширины содержимого iframe, несмотря на переполнение: скрыто

Question

Я пытаюсь имитировать iframes в стиле рабочего стола в Android (браузер Dolphin) с некоторыми успехами. Хитрость заключается в том, чтобы положить <iframe> с position:relative; внутри <div> с фиксированными размерами и overflow:hidden;затем с помощью jQuery Mobile (точнее, только событий vmouse) обрабатывать события мыши для прокрутки.

Все это прекрасно работает, за исключением одной вещи; Хотя <iframe> обрезается, его содержимое растягивает браузер, чтобы соответствовать размеру. Это в основном заметно по высоте.

Вот упрощенный пример кода в JSFiddle: http://jsfiddle.net/euKhG/

Вот результат, который можно посмотреть в браузере Android: http://jsfiddle.net/euKhG/embedded/result/ (работает только в браузере Android!).

Кто-нибудь знает, как решить эту проблему? Я видел iScroll и аналогичные, предложенные в другом месте, но они, кажется, касаются кадров с помощью пульта дистанционного управления. src как это.

Answer 1

Попробуйте установить target-densitydpi в метатеге

    <meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>

но вам придется изменить все другие CSS относительно этого

Answer 2

Мммм, я думаю, вы что-то здесь упустили. Прямо сейчас ваш iFrame обрезается, да, но не из-за того, что вы установили переполнение: прокрутка, или из-за того, что вы установили свойство width/height рамки контейнера; отсечение, которое вы видите в данный момент, совершенно произвольно.

Чтобы доказать это, добавьте background:#ff0000 к вашему контейнеру div, и вы увидите, что это не ширина / высота div, определяющая область обрезки вашего iframe, а некоторые свойства измерения iframe по умолчанию: http://jsfiddle.net/kauUr/

Я рекомендую, учитывая, что вы сказали, что ваш div имеет фиксированные размеры, настройте свой iframe со свойствами width/height тех же размеров, чтобы он совпадал. Вы можете сделать это, используя атрибуты width и height, или более аккуратно, используя css justas, который вы сделали для контейнера div. После того, как вы дадите iFrame правильную ширину / высоту, обрезка должна соответствовать ожидаемой, и браузер должен прокручивать не до размера содержимого iframe, а до указанных вами размеров. На самом деле, даже если размеры div не известны заранее, вы можете использовать Javascript для их получения, а затем правильно изменить размер iFrame во время выполнения.

<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000">
    <iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe>
</div>​

И если это не сработает, попробуйте ударить overflow:none в стиле iframe.