質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • Monaca

    979questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • React.js

    835questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Onsen UI

    320questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Onsen UI でiframeでwebページを表示するとiosで正しくwidthが適用されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 223

mikan3rd

score 3

 前提・実現したいこと

  • onsen-uiでwebページを表示したい

 発生している問題・エラーメッセージ

理想 実際
イメージ説明 イメージ説明

 該当のソースコード

import React from 'react';
import {Page, Toolbar,BackButton} from 'react-onsenui';


class Browser extends React.Component {

    renderToolbar = () => {
        return (
            <Toolbar>
                <div className='left'>
                <BackButton>戻る</BackButton>
                </div>
            </Toolbar>
        );
        }

  render () {

    return (
      <Page renderToolbar={this.renderToolbar}>
        <div className="c-browser__iframe__wrapper">
          <iframe
            className="c-browser__iframe"
            src="https://www.hotpepper.jp/strJ000063796/"
          />
        </div>
      </Page>
    );
  }
}

export default Browser
.c-browser__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.c-browser__iframe__wrapper {
  display: inline-block;
  height: 100%;
  width: 100%;
  overflow: auto;
}

 試したこと

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

私も同じ内容で困っていました。AngularJSを使用していましたので違いはありますが。
参考

JS側でデバイスの画面の幅を取得し、それをiframeの横幅に当てはめることで解決しましたがいかがでしょうか。
reactでウィンドウサイズの取得
iosの場合は横幅だけでよいのですが、androidの場合は縦幅も決めないと表示がうまくいきませんでした。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/08 10:23

    回答ありがとうございます

    iframeのwrapperの方にサイズを指定することでiframeの大きさは制御できました。
    しかし、iframeで表示しているwebページは理想の画像のようにレスポンシブ対応してくれませんでした。
    これはwebページの方の問題なのでしょうか・・・?

    キャンセル

  • 2018/06/08 10:49

    「Onsen UI V2 Angular 1 Tabbar」のテンプレートではありますが、
    記載されているURL: https://www.hotpepper.jp/strJ000063796/
    に書き換えたところ、理想の画像のようにレスポンシブ対応ができた状態で表示することができました。
    webページに問題はないかと思います。

    キャンセル

  • 2018/06/08 19:22

    すみません、Chromeのディベロッパーツールでは正しく表示されなかったのですが、実機では正常に表示されました!ありがとうございました

    キャンセル

+1

import React from 'react';
import ons from 'onsenui';
import {Page, Toolbar,BackButton, } from 'react-onsenui';


class Browser extends React.Component {

  constructor(props) {
    super(props);

    const isIOS = ons.platform.isIOS();

    this.state = {
      width: window.innerWidth,
      height: isIOS ? '' : '100%',
      scrolling: isIOS ? 'no' : 'yes',
    }
  }

    renderToolbar = () => {
        return (
            <Toolbar>
                <div className='left'>
                <BackButton>戻る</BackButton>
                </div>
            </Toolbar>
        );
        }

  render () {

    const {
      width,
      height,
      scrolling,
    } = this.state;

    return (
      <Page renderToolbar={this.renderToolbar}>
          <iframe
            id="browser-iframe"
            className="c-browser__iframe"
            src="https://www.hotpepper.jp/strJ000063796/"
            width={width}
            height={height}
            scrolling={scrolling}
          />
      </Page>
    );
  }
}

export default Browser

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Monaca

    979questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • React.js

    835questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Onsen UI

    320questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。