teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問モバイルでfixedが反映されない

編集履歴

質問編集履歴

3

iphoneではなくiphone6でした

2017/12/26 15:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  position:fixed;
2
2
 
3
- がpc及びiphone7+では反映されているのにiphoneではどういじっても反映されないです。原因を探るために余分なものを取り除いてシンプルなコードにしたのですがまだ原因がわかりません... 教えていただけると幸いです。
3
+ がpc及びiphone7+では反映されているのにiphone６ではどういじっても反映されないです。原因を探るために余分なものを取り除いてシンプルなコードにしたのですがまだ原因がわかりません... 教えていただけると幸いです。
4
4
 
5
5
 
6
6
 

2

原因の要素がわかったので質問を変更しました

2017/12/26 15:03

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Chromeの検証で同じサイズのサイトのレイアウトのスマホ版でレイアウトが全く異なってしまう。
1
+ モバイルでfixedが反映されない
test CHANGED
@@ -1,13 +1,41 @@
1
- スマホ対応のウェブサイトを製作しているものですが、自分のスマホを見ながらhtmlとcssをいじっていました。５５０pxをブレイクポイントとしたレスポンシブなものにしました。自分のスマホではとても綺麗に仕上がっていたのに友人のスマホではレイアウトがグチャグチャでした。PCのchromeを見ると私のスマホではブラウザを縮めただけのものと対応していて、友人のは検証のdevice toolbar で表示されているものになっていました。どちらもスマホサイトではモバイル版になっているはずなのにこの違いはどこから来ているのでしょうか？
1
+ position:fixed;
2
2
 
3
- headタグには
3
+ がpc及びiphone7+では反映されているのにiphoneではどういじっても反映されないです。原因を探るために余分なものを取り除いてシンプルなコードにしたのですがまだ原因がわかりません... 教えていただけると幸いです。
4
+
5
+
4
6
 
5
7
  ```html
6
8
 
9
+ <!DOCTYPE html>
10
+
11
+ <html lang="ja">
12
+
13
+ <head>
14
+
15
+ <link rel="stylesheet" type="text/css" href="fuck.css">
16
+
7
17
  <meta name="viewport" content="width=device-width,initial-scale=1">
18
+
19
+ </head>
20
+
21
+ <body>
22
+
23
+ <div class="test">aaaaaaa</div>
24
+
25
+ </body>
26
+
27
+ </html>
8
28
 
9
29
  ```
10
30
 
11
- が書かれているのでサイズさえ同じであればPCであれスマホであれ見え方は同じだと自分なりに調べて解釈していますが
31
+ ```css
12
32
 
13
- きっと私のレスポンシブに対する理解が不足しているのだと思いますがそれを誰か教えていただけると幸いです。
33
+ html,body{width:330vw;}
34
+
35
+
36
+
37
+ .test{position:fixed;}
38
+
39
+
40
+
41
+ ```

1

先ほどまで０から作り上げたサイトで検証でメニューバーが固定されていないとありましたがそれはまた別の問題でした。すみません

2017/12/26 14:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,185 +1,13 @@
1
1
  スマホ対応のウェブサイトを製作しているものですが、自分のスマホを見ながらhtmlとcssをいじっていました。５５０pxをブレイクポイントとしたレスポンシブなものにしました。自分のスマホではとても綺麗に仕上がっていたのに友人のスマホではレイアウトがグチャグチャでした。PCのchromeを見ると私のスマホではブラウザを縮めただけのものと対応していて、友人のは検証のdevice toolbar で表示されているものになっていました。どちらもスマホサイトではモバイル版になっているはずなのにこの違いはどこから来ているのでしょうか？
2
2
 
3
-
4
-
5
- また、コーディングに問題があると思ったので１から作り直しているのですが、ハンバーガーメニューをつけたらまたdevice toolbarでは異なる挙動になっていて
3
+ headタグには
6
4
 
7
5
  ```html
8
6
 
9
- <!DOCTYPE html>
10
-
11
- <html lang="ja">
12
-
13
- <head>
14
-
15
- <?php get_header(); ?>
16
-
17
- </head>
18
-
19
- <ul id="menu">
20
-
21
- <li><a href="#s_analysis">カテゴリー１</a></li>
7
+ <meta name="viewport" content="width=device-width,initial-scale=1">
22
-
23
- <li><a href="#">カテゴリー２</a></li>
24
-
25
- <li><a href="#">カテゴリー３</a></li>
26
-
27
- <li><a href="#">カテゴリー４</a></li>
28
-
29
- </ul>
30
-
31
-
32
-
33
- <body>
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
- <?php wp_head(); ?>
42
-
43
-
44
-
45
-
46
-
47
- </body>
48
-
49
- </html>
50
-
51
-
52
-
53
- コード
54
8
 
55
9
  ```
56
10
 
11
+ が書かれているのでサイズさえ同じであればPCであれスマホであれ見え方は同じだと自分なりに調べて解釈していますが
57
12
 
58
-
59
- ```Css
60
-
61
-
62
-
63
- nav.menu { width:25px; height:30px; top: 80px; right:10px; position:fixed; cursor:pointer; overflow:hidden; z-index:9999; }
64
-
65
- nav .menu1 { width:25px; height:2px; background-color: #000; top:0px; position:absolute; }
66
-
67
- nav .menu2 { width:25px; height:2px; background-color: #000; top:8px; position:absolute; }
68
-
69
- nav .menu3 { width:25px; height:2px; background-color: #000; top:16px; position:absolute; }
70
-
71
-
72
-
73
- nav .menu1,nav .menu2,nav .menu3
74
-
75
- { transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* Opera */ -moz-transition: all 0.5s ease-out; /* Firefox */
76
-
77
- -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out; /* IE */ }
78
-
79
- nav .menuclick1 { top:8px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg);
80
-
81
- -ms-transform: rotate(405deg); transform: rotate(405deg); }
82
-
83
- nav .menuclick2 { background-color:rgba(255,255,255,0); }
84
-
85
- nav .menuclick3 { top:8px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg);
86
-
87
- -webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); }
88
-
89
- #menu{
90
-
91
-
92
-
93
- position: fixed;
94
-
95
- font-weight: bold;
96
-
97
- display: none;
98
-
99
- right: 15px;
100
-
101
- top: 100px;
102
-
103
- list-style-type: none;
104
-
105
- background-color: rgba(255, 255, 255, 1);
106
-
107
- border: 2px solid #000;
108
-
109
- padding: 20px 20px 0px 20px;
110
-
111
- z-index: 9999;
112
-
113
- }/*by misallychan.com*/
114
-
115
-
116
-
117
- html,body{
118
-
119
- height:100vh;
120
-
121
- width:330vw
122
-
123
- }
124
-
125
-
126
-
127
- body{
128
-
129
- margin:0;
130
-
131
- }
132
-
133
-
134
-
135
- ```
136
-
137
- ```javascript
138
-
139
- jQuery(function(){
140
-
141
- jQuery(".menu").click(function(){
142
-
143
- jQuery(".menu1").toggleClass("menuclick1")
144
-
145
- });
146
-
147
- jQuery(".menu").click(function(){
148
-
149
- jQuery(".menu2").toggleClass("menuclick2")
150
-
151
- });
152
-
153
- jQuery(".menu").click(function(){
154
-
155
- jQuery(".menu3").toggleClass("menuclick3")
156
-
157
- });
158
-
159
- });
160
-
161
- jQuery(function($){
162
-
163
- $('.menu').click(function(){
164
-
165
- if ($('#menu').css('display') == 'none') {
166
-
167
- $('#menu').slideDown('fast');
168
-
169
- } else {
170
-
171
- $('#menu').slideUp('fast');
172
-
173
- }
174
-
175
- });
176
-
177
- });
178
-
179
- ```
180
-
181
- これがハンバーガーメニューをつけただけで、横スクロースするサイトにしたいのですが、私のスマホではしっかり画面右上にメニューが固定されるのに device toolbarや友人のスマホではbodyの右上に固定されていてスクロールしないと出て来ません。（コード的には後者が正しいと思いますが。）
182
-
183
-
184
-
185
- きっと私のレスポンシブに対する理解が不足しているのだと思いますがそれを誰か教えてくださると幸いです。
13
+ きっと私のレスポンシブに対する理解が不足しているのだと思いますがそれを誰か教えていただけると幸いです。