Q&A
回答したあとにasuchi0819さんの回答を拝見して思いましたが、確かに「WEBアプリ」と言うことでほとんど見た目だけの問題でしょうし、「トライアンドエラー」で良いようでもあるので、WebKitが使える環境での確認で充分かもしれませんね。iOSにガチに向き合う必要は無さそうです。
HTML、javascript、cssでウェブアプリを作りましたが、iphoneの友達から、画面があなたのと異なると教えてもらいました。どうやらpcとアンドロイドiphoneで見た時で、表示される画面が異なるようです。
んどろい
アンドロイドやPCで開いたとき
iphoneで開いた時
（電卓のボタンはグリッドレイアウトで書いています）
そのため、自分のwindows10のpcにiphoneのエミュレーターを入れて、トライアンドエラーをするのが今後必要になると考えました。
同じようにiphoneでの表示状況の確認のためにやる方法として、
・エミュレーターを使用するのが正しいのか？
・どのエミュレーターを使用しているのか？
を教えていただきたいです。
以下追加します。
iphone及びmac関連商品は全く持っていないため、WindowsPCでどうやってiphoneで見た時の画面を再現するかを検討しています。サイトは以下です。
今回の問題の正しく表示されないサイト
リンクが間違っていたので、2019年10月31日10:44に修正しました。
なお、choromeの開発ツールからDevicd Toolbarから
iPhoneなどを選ぶのは試しましたが、多少のレイアウトの違いはありますが、友人から指摘を受けたボタンが5mmくらいに細くなってしまうような状況は確認できませんでした。
回答5件
0
ベストアンサー
残念ですが、Windows10上で動くiPhone(iOS)のエミュレーターは存在しません。
windows10で動作するiOSのエミュレーター - 教えて!goo
これはWindows 10上でiOSデバイスをターゲットとするアプリの開発をする上で、全て同じ事情です。
MacBooxを購入してXcode/iPhoneのエミュレーターを動作させるか、クラウド上のiOSデバイスをリモート操作できるような各社のサービスを利用するしか方法は無いと思います。それらクラウド上のサービスは、まさに質問者さんが要望するような、各種のiPhone/iPadデバイスのテスト／デバッグをするためのものです。
投稿2019/10/29 23:31
総合スコア9256
0
デベロッパーツールが画面サイズ的には代用できそうですが完璧にテストするなら実機でテストしてください。
機能的にはWebKit系ブラウザでサイズを変えれば代用できるかも
当方環境で再現できました。（iPadOS13.1.2）
投稿2019/10/29 23:29
編集2019/10/31 01:19
総合スコア10429
とは言いつつも現行のiOS SafariはWebKit2を採用しており多くのブラウザが採用しているWebKit(1)とは互換性がない上、採用しているブラウザがないようです。
実機に勝るものはないですね。
おっしゃる通り、今回は、見た目だけの問題なんですが、読んでみると、WebKit(2)がSafariで、それで画面が合うようにしても、他のブラウザで採用してないから意味がないし、WebKit(1)は、多くのブラウザで使っているけど、Safariで使われてないから、こっちで画面を確認しても意味がない、ということでいいですよね？
WebKit１と２でそんな違いがあったなんて知らなかったので、とても助かる情報でした。ありがとうございました。
今回、どんなふうになってしまったのかを、画像として追加しました。PCとiphoneでこんなにも異なるのかと実感し、いろんなデバイスでの画面を確認することの大切さを痛感しました。グリッドレイアウトにした後にこんなことになったので、グリッドレイアウトがiOSで使えるものなのかを調べなおしてみます。
公開されてないサイトなんですかね。
Not Foundになりました。
コードはコードで別途提示された方が良いです
よくよく見るとSafariやChromeやFireFoxじゃなさそうですね一度そう言ったブラウザで見てもらってください。（またはリンクが切れているので確認できるリンクを載せるかコードを載せてください）
今はどうか知りませんが、稀にLINE等のアプリのブラウザだとうまく表示されない問題がありました。
URLの雰囲気がLINEですね。
LINEメッセージでURL送ってメッセージからタップでそのまま開くとアプリ内ブラウザになるので注意が必要ですね。
> よくよく見るとSafariやChromeやFireFoxじゃなさそうですね
言われてみると、少し違和感ある気がしますね。
＞質問者rickeyさん
「WEBアプリ」とありましたが、どのようなフレームワーク(例えばCordovaとか、Xamarinとか)を利用したか、あるいはどのように作った示した方がよいと思います。私自身は詳しくありませんが。
「グリッドレイアウト」という言葉が出てきたので、はて、何だろうと思いました。
（当初の質問の求めるところからは離れてしまっている懸念はありますが）
Safariで確認できました。
本当の（サーバー上でホスティングする）WEBアプリでしたね。誤解していました。大変失礼しました。Cordova云々は忘れてください。すみません。
m.ts10806様
貼り付けたリンク、開けなくて申し訳ありませんでした。リンクにミスがあり、修正しました。おそらく開けるようになったかと思います。
取り急ぎ、ご報告いたします。
asuchi0819様
リンクが間違ってまして申し訳ありません。修正しました。ご確認ありがとうございます。再現されて、まずはよかったというのか、正しいミスであることが再確認できました。お手数おかけして申し訳ありません。
やはりPC(chrome）とは異なるのですね。何かの記述の仕方が問題だと思うので、それの直し方を探してみます。
dodox86様
今回はフレームワークは使わずに、HTML,CSS,javascriptのみで作ってみました。もしかすると、言葉の使い方や理解が間違っていて、表現が間違っているのかもしれません。そこは申し訳ありません。
グリッドレイアウトは、以下のを参考にCSSに記述しました。
https://idotdesign.net/blog/web/htmlcss/css-grid-layout/
CanIUseを確認したところ特にiOS Safariに非対応なグリッドのCSSはありませんでした。（FireFoxだけ とか IEだけ というのは除く）
コードは原則質問本文にそのまま提示すること。
0
そのため、自分のwindows10のpcにiphoneのエミュレーターを入れて、トライアンドエラーをするのが今後必要になると考えました。
iOSの実機を持っているのであれば、実機のSafariについて、Windowsから開発ツールを開いてデバッグすることも（ある程度は）可能です。
投稿2019/10/30 00:42
総合スコア145975
いつもご回答ありがとうございます。実機を使うのが一番なのですが、実機を持っていないため、友人に見てもらって修正してました。
今回、新たに何が起きてるかの画像や、実際のサイトのリンクをはりました。
他の方のご指摘の方法でのchromeでのデベロッパーツールでDeviced ToolberでいいiPhoneを選択した場合では、このような症状が見れなかったため、エミュレーター等の必要性を感じて検索及び、質問させていただいております。
0
Web の確認であれば ブラウザの確認で良さそうに思いますが、
このような方法で足りませんか？
- Chrome の [右クリック]->[検証] で開発ツールを開く
- 開発ツール左上の Devicd Toolbar (スマホのような形のアイコン)を押す
- [Responsive▼] のプルダウンメニューから [iPhone 6/7/8] などを選ぶ
それでも差があって、厳密な確認がしたいなら実機(iPod touchとか)を買うかなーと思います。
投稿2019/10/30 00:30
編集2019/10/30 00:34
総合スコア484
解答ありがとうございます。
さっそく、この方法を試してみたのですが、この方法では写真のような現象はおきませんでした（画像とサイトのリンクを新たに添付しました）
やはり実機を用意しないといけなそうですね。
0
WindowsでiOSを起動する【iosエミュレーター】裏ワザの紹介 が使えるかどうか？
iOSやWindowsのバージョンやEditionにも依存するでしょうし。
投稿2019/10/29 23:43
総合スコア16417
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/31 00:10
2019/10/31 00:41
2019/10/31 00:46