質問編集履歴

1

2022/01/14 07:47

投稿

Thinkfast
Thinkfast

スコア0

test CHANGED
@@ -1 +1 @@
1
- レスポンシブデザインのレイアウトが実際のモバイルデバイスでは崩れてしまう。
1
+ Media Queryが実際のモバイルデバイス、エミュレーターでは崩れてしまう。
test CHANGED
@@ -1,81 +1,44 @@
1
1
  ![イメージ説明](0633fba37682b9ea827bb1b0d56b9dbf.png)![イメージ説明](cc08c633fb2b35708cb3972098497007.jpeg)
2
2
 
3
3
 
4
-
5
-
6
-
7
4
  こんにちは。独学でWEB開発の勉強をしております。
8
-
9
5
  学習を兼ねて作成しているWEBサイトのレスポンシブ対応についてお伺いできればと思います。
10
6
 
11
-
12
-
13
7
  レスポンシブのテストとして私のスマホのビューポートサイズに合わせてメディアクエリを書き、
14
-
15
8
  Chrome, Firefox Dev Toolではレイアウトが崩れることなく表示されますが、実機では写真のようにレイアウトが崩れて表示されてしまいます。
16
-
17
9
  iPhone8,11でも確認しましたが、レイアウトは崩れてしまっているので、全てのモバイルサイズのデバイスに影響が出ているようです。
18
-
19
-
20
10
 
21
11
  Xiaomi Redmi Note9 (viewport size 393px/759px)をテストに使用しています。
22
12
 
23
-
24
-
25
13
  自身でもHead内のMetaタグの確認、メディアクエリの確認、CSSプロパティの確認を行いましたが解決に至らず、ご質問させていただ来ます。
26
-
27
14
  経験も浅く、お見苦しいコードかもしれませんが、皆様のアドバイスを頂けましたら幸いです。
28
-
29
-
30
15
 
31
16
  GitHubのURLを捕捉欄に貼っておきます。
32
17
 
33
18
 
34
19
 
35
-
36
-
37
-
38
-
39
20
  ### 発生している問題・エラーメッセージ
40
21
 
41
-
42
-
43
22
  ```
44
-
45
23
  モバイル端末に対してのレスポンシブが効かない。
46
-
47
24
  Chrome, Firefox Dev Toolではレイアウトが崩れることなく表示されるが、実際のモバイルデバイスではレイアウトが崩れて表示されてしまう。
48
-
49
25
  ```
50
-
51
-
52
26
 
53
27
  ### 該当のソースコード
54
28
 
55
29
 
56
30
 
57
-
58
-
59
-
60
-
61
31
  ### 試したこと
62
-
63
-
64
32
 
65
33
  HTML Head内Metaタグの確認、メディアクエリの確認、CSSプロパティがブラウザに対応しているかの確認。
66
34
 
67
-
68
-
69
35
  ### 補足情報(FW/ツールのバージョンなど)
70
36
 
71
-
72
-
73
37
  GitHub
74
-
75
38
  https://github.com/flutnative/komugi-test
76
39
 
40
+ サイトページ
41
+ https://flutnative.github.io/komugi-test/
77
42
 
78
-
79
- サイトページ
43
+ Media Queryの優先順位の問題かと思い、Media Queryの順位書き換え、!importnatなどCSSプロパティに入れてみましたが未だ解決にならず。
80
-
81
- https://flutnative.github.io/komugi-test/
44
+ エミュレーターの場合Dev Toolで確認してみると、全くMedia Queryは効いておらず、別に書いたwidth 375pxのみのMQが読み込まれている。