― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 4 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2022年11月20日(日) 16:34 
オフライン

登録日時: 2022年11月20日(日) 16:11
記事: 2
レスポンシブデザイン・モードは、他の端末で見た時にどう見えるかをシミュレーションできて便利なのですが、1つ欠点があります。

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

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

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

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

よろしくお願いします。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2022年11月20日(日) 18:47 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3671
Nanamori さん、EarlgreyTea と申します。

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

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

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

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

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

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

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

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

----------------------

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2022年11月21日(月) 01:25 
オフライン

登録日時: 2022年11月20日(日) 16:11
記事: 2
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 公式に改善要求をしたほうが良いのでは?とも思い、その方法も質問させていただいたわけです。
丁寧にお教えいただき、ありがとうございます。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2022年11月21日(月) 22:12 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 3671
Nanamori さんが書きました:
すると、ディスプレイサイズ(screen resolution)も ブラウザサイズ(browser resolution)も、ともに 360×800 になっているのです。

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

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

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

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

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

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

ターゲット端末のビューポートのサイズは当然調べるはずですし、そうでなければ仕事にならないかと思います。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 4 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[40人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean