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

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

ただいまの
回答率

87.37%

iphoneのエミュレーターを探しています(windows10に入れる)

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,315

score 24

HTML、javascript、cssでウェブアプリを作りましたが、iphoneの友達から、画面があなたのと異なると教えてもらいました。どうやらpcとアンドロイドiphoneで見た時で、表示される画面が異なるようです。
んどろい
アンドロイドやPCで開いたとき
アンドロイドやPC

iphoneで開いた時
iphoneで開いたとき
(電卓のボタンはグリッドレイアウトで書いています)

そのため、自分のwindows10のpcにiphoneのエミュレーターを入れて、トライアンドエラーをするのが今後必要になると考えました。

同じようにiphoneでの表示状況の確認のためにやる方法として、
・エミュレーターを使用するのが正しいのか?
・どのエミュレーターを使用しているのか?
を教えていただきたいです。

以下追加します。
iphone及びmac関連商品は全く持っていないため、WindowsPCでどうやってiphoneで見た時の画面を再現するかを検討しています。サイトは以下です。

今回の問題の正しく表示されないサイト
リンクが間違っていたので、2019年10月31日10:44に修正しました。

なお、choromeの開発ツールからDevicd Toolbarから
iPhoneなどを選ぶのは試しましたが、多少のレイアウトの違いはありますが、友人から指摘を受けたボタンが5mmくらいに細くなってしまうような状況は確認できませんでした。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

checkベストアンサー

+4

残念ですが、Windows10上で動くiPhone(iOS)のエミュレーターは存在しません。

windows10で動作するiOSのエミュレーター - 教えて!goo

これはWindows 10上でiOSデバイスをターゲットとするアプリの開発をする上で、全て同じ事情です。
MacBooxを購入してXcode/iPhoneのエミュレーターを動作させるか、クラウド上のiOSデバイスをリモート操作できるような各社のサービスを利用するしか方法は無いと思います。それらクラウド上のサービスは、まさに質問者さんが要望するような、各種のiPhone/iPadデバイスのテスト/デバッグをするためのものです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/31 09:10

    解答ありがとうございます。検索してきて、ゼロではないにしろ、件数は少ないし、記事が古いので、不安だったんです。このコメントを見て、わかったよかったです。
    エミュレーターではない他の方法を模索します。

    キャンセル

  • 2019/10/31 09:41

    今回、どんなふうになってしまったのかを、画像として追加しました。PCとiphoneでこんなにも異なるのかと実感し、いろんなデバイスでの画面を確認することの大切さを痛感しました。グリッドレイアウトにした後にこんなことになったので、グリッドレイアウトがiOSで使えるものなのかを調べなおしてみます。

    キャンセル

  • 2019/10/31 09:46

    質問記述内容のフォローありがとうございます。このように実例を提示してもらえますと私も含め、後日、質問に興味を覚えて閲覧した方の参考になると思います。

    キャンセル

+4

デベロッパーツールが画面サイズ的には代用できそうですが完璧にテストするなら実機でテストしてください。
機能的にはWebKit系ブラウザでサイズを変えれば代用できるかも

当方環境で再現できました。(iPadOS13.1.2)
イメージ説明

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/31 11:02 編集

    dodox86様
    今回はフレームワークは使わずに、HTML,CSS,javascriptのみで作ってみました。もしかすると、言葉の使い方や理解が間違っていて、表現が間違っているのかもしれません。そこは申し訳ありません。
    グリッドレイアウトは、以下のを参考にCSSに記述しました。
    https://idotdesign.net/blog/web/htmlcss/css-grid-layout/

    キャンセル

  • 2019/10/31 12:30

    CanIUseを確認したところ特にiOS Safariに非対応なグリッドのCSSはありませんでした。(FireFoxだけ とか IEだけ というのは除く)

    キャンセル

  • 2019/10/31 13:01

    コードは原則質問本文にそのまま提示すること。

    キャンセル

+1

そのため、自分のwindows10のpcにiphoneのエミュレーターを入れて、トライアンドエラーをするのが今後必要になると考えました。

iOSの実機を持っているのであれば、実機のSafariについて、Windowsから開発ツールを開いてデバッグすることも(ある程度は)可能です。

google/ios-webkit-debug-proxy

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/31 08:44

    いつもご回答ありがとうございます。実機を使うのが一番なのですが、実機を持っていないため、友人に見てもらって修正してました。
    今回、新たに何が起きてるかの画像や、実際のサイトのリンクをはりました。
    他の方のご指摘の方法でのchromeでのデベロッパーツールでDeviced ToolberでいいiPhoneを選択した場合では、このような症状が見れなかったため、エミュレーター等の必要性を感じて検索及び、質問させていただいております。

    キャンセル

0

Web の確認であれば ブラウザの確認で良さそうに思いますが、
このような方法で足りませんか?

  1. Chrome の [右クリック]->[検証] で開発ツールを開く
  2. 開発ツール左上の Devicd Toolbar (スマホのような形のアイコン)を押す
  3. [Responsive▼] のプルダウンメニューから [iPhone 6/7/8] などを選ぶ

それでも差があって、厳密な確認がしたいなら実機(iPod touchとか)を買うかなーと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/31 09:03

    解答ありがとうございます。
    さっそく、この方法を試してみたのですが、この方法では写真のような現象はおきませんでした(画像とサイトのリンクを新たに添付しました)
    やはり実機を用意しないといけなそうですね。

    キャンセル

-2

WindowsでiOSを起動する【iosエミュレーター】裏ワザの紹介 が使えるかどうか?
iOSやWindowsのバージョンやEditionにも依存するでしょうし。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/10/31 11:08 編集

    ご回答ありがとうございます。試してみます。

    キャンセル

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

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

関連した質問

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