MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

PC版のレスポンシブ・デザイン・モードが不完全
https://forums.mozillazine.jp/viewtopic.php?f=2&t=20726		 ページ 1 ／ 1
作成者:  Nanamori [ 2022年11月20日(日) 16:34 ]
記事の件名:  PC版のレスポンシブ・デザイン・モードが不完全
レスポンシブデザイン・モードは、他の端末で見た時にどう見えるかをシミュレーションできて便利なのですが、１つ欠点があります。

例えばこういうページ →　https://rakko.tools/tools/2/　を見れば分かるように、「ディスプレイサイズ」と「ブラウザサイズ」は異なります。
たとえブラウザを画面いっぱいに広げたとしても、アドレスバーなどにスペースを取られるゆえに、どうしてもブラウザサイズはディスプレイサイズより小さくなる。

色々試してみた結果、どうやらレスポンシブデザイン・モードはそれを反映せず、常にブラウザサイズがディスプレイサイズに一致している前提でシミュレーションされているようなのです。

この問題を解決できる方法を、どなたかご存じないでしょうか？

また、恥ずかしながら私は今日フォーラムに参加したばかりなで、FireFox公式に直接メールなどで要望を届ける方法を知りません。
これも、どなたかご存じでしたら教えていただきたく存じます。

よろしくお願いします。
作成者:  EarlgreyTea [ 2022年11月20日(日) 18:47 ]
記事の件名:  Re: PC版のレスポンシブ・デザイン・モードが不完全
Nanamori さん、EarlgreyTea と申します。

Nanamori さんが書きました:
色々試してみた結果、どうやらレスポンシブデザイン・モードはそれを反映せず、常にブラウザサイズがディスプレイサイズに一致している前提でシミュレーションされているようなのです。

具体的にどういうことでしょうか。
再現手順とともに詳細をお願いします。

Nanamori さんが書きました:
また、恥ずかしながら私は今日フォーラムに参加したばかりなで、FireFox公式に直接メールなどで要望を届ける方法を知りません。

もし改善すべき不具合があるということであれば、 https://bugzilla.mozilla.org/ にアカウントを作って、バグ報告をすることになります。
あ、ちなみにこのフォーラムは Mozilla が運営してるわけではなく、直接の関係はないユーザーコミュニティですのでお間違えなく。

ということで、上でお願いした詳細について、バグ報告の練習がてら下記の形式（もちろん日本語で結構です）でお願いしますね。
参考：Bug Writing Guidelines
－－－－－－－－－－－－－－－－－－－－－－
Summary:
（タイトルとなる要約を一文で書いてください）

Steps to Reproduce:
（現象を再現するための操作手順を書いてください）
1.
2.
3.

Actual Results:
（上の手順を実行したことで実際に起こる結果を書いてください）

Expected Results:
（本来こうなるべきという期待結果を書いてください）

－－－－－－－－－－－－－－－－－－－－－－
作成者:  Nanamori [ 2022年11月21日(月) 01:25 ]
記事の件名:  Re: PC版のレスポンシブ・デザイン・モードが不完全
EarlgreyTea 様、返信ありがとうございます。

ご説明いたします。
例えば、私の使っているスマートフォンは「 Galaxy S20 」なのですが、それを使って

https://rakko.tools/tools/2/　あるいは、
https://mdigi.tools/dev/

などのチェッカーサイトを 全画面で 開くと、
ディスプレイサイズ（screen resolution）→ 360×800 、
ブラウザサイズ（browser resolution）→ 360×670
といった数値を出してくれるわけです。これは　幅×高さ　の数値です。

なぜディスプレイサイズの「高さ」と比べて ブラウザサイズのそれが小さいかというと、アドレスバーやナビゲーションバーの「高さ」がブラウザに含まれないからですね。
そして、この「ブラウザサイズ」こそが、実際に Galaxy S20 で Web ページを見ている際のサイズを表していることは、お分かりかと思います。

さて、次に FireFox の Windows 版を起動し、レスポンシブデザイン・モードの「 Galaxy S20 」を選択して、上記のチェッカーサイト（ https://rakko.tools/tools/2/　あるいは　https://mdigi.tools/dev/ ）に行ってみましょう。
すると、ディスプレイサイズ（screen resolution）も ブラウザサイズ（browser resolution）も、ともに 360×800 になっているのです。
これでは、レスポンシブデザイン・モードは、Galaxy S20 におけるWebページの「見え方」を正しくシミュレートできていないことになりますよね？

確かに、「手動で高さを670にすればよいのでは？」と思われるかもしれませんが、それは私が Galaxy S20 における（全画面の）ブラウザサイズを 360×670 と知っているからこそ可能な事です。
自分の知らない機種を正しくシミュレーションすることはできません。

それで、解決法を質問した次第です。

一方で、こういう事はフォーラムで尋ねるよりも FireFox 公式に改善要求をしたほうが良いのでは？とも思い、その方法も質問させていただいたわけです。
丁寧にお教えいただき、ありがとうございます。
作成者:  EarlgreyTea [ 2022年11月21日(月) 22:12 ]
記事の件名:  Re: PC版のレスポンシブ・デザイン・モードが不完全
Nanamori さんが書きました:
すると、ディスプレイサイズ（screen resolution）も ブラウザサイズ（browser resolution）も、ともに 360×800 になっているのです。

はい、レスポンシブデザインモード（RDM）はコンテンツエリア、すなわちビューポートのサイズを指定して端末での動作をエミュレートします。
スクリーンサイズは指定していませんので同じになるのは当然と言えます。

Nanamori さんが書きました:
これでは、レスポンシブデザイン・モードは、Galaxy S20 におけるWebページの「見え方」を正しくシミュレートできていないことになりますよね？

それによって動作に不具合を生じているというわけではないのですね。
ビューポートはユーザーが好きなサイズに設定できますので、それで問題ないはずです。
問題としているのは、プリセットされている端末リストで設定されているサイズが適切ではないということでしょうか。

Nanamori さんが書きました:
それは私が Galaxy S20 における（全画面の）ブラウザサイズを 360×670 と知っているからこそ可能な事です。

S20はたまたま端末リストにありましたが、実際にいろんな端末の動作を確認するには「カスタム端末を追加」で設定を追加することになります。

その際に入力する情報は
・端末名
・サイズ
・端末ピクセル比
・ユーザーエージェント文字列
・タッチスクリーン有効/無効
で、Chrome や Edge も同様です。
スクリーンサイズとかUIの高さとかはありません。

ターゲット端末のビューポートのサイズは当然調べるはずですし、そうでなければ仕事にならないかと思います。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/