teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問iPhoneでレイアウトが崩れてしまうのですがwebkitを設定しても治りません。どうしたら良いですか？

編集履歴

質問編集履歴

10

2021/01/05 10:36

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -4,14 +4,26 @@
4
4
 
5
5
 
6
6
 
7
+
8
+
9
+
10
+
7
11
  本来ならこうなるはずが
8
12
 
9
13
  ![イメージ説明](29ffef38fea60ec48a34da70b9acea9e.jpeg)
10
14
 
15
+
16
+
17
+
18
+
11
19
  下のようになります。
12
20
 
13
21
  ![イメージ説明](9a40599e0bf72812bfc5785c2a165aa8.jpeg)
14
22
 
23
+
24
+
25
+
26
+
15
27
  ここに言語を入力
16
28
 
17
29
  html CSS
@@ -124,16 +136,24 @@
124
136
 
125
137
 
126
138
 
139
+
140
+
127
141
  本来こうなるはずが
128
142
 
129
143
  ![イメージ説明](0e4699f0e6073778227ddf1b92e55b13.jpeg)
130
144
 
145
+
146
+
147
+
148
+
131
149
  下のようになります。
132
150
 
133
151
  ![イメージ説明](8ed72aed85b9c9c445539a6081df5d72.jpeg)
134
152
 
135
153
 
136
154
 
155
+
156
+
137
157
  以下問題のコードです。
138
158
 
139
159
 
@@ -244,14 +264,24 @@
244
264
 
245
265
 
246
266
 
267
+
268
+
247
269
  本来こうなるはずが
248
270
 
249
271
  ![イメージ説明](e99af6008fc6d197c0eb176ce3cc98c6.jpeg)
250
272
 
273
+
274
+
275
+
276
+
251
277
  下のようになります。
252
278
 
253
279
  ![イメージ説明](951b29b17466532cdf63582166d01a7c.jpeg)
254
280
 
281
+
282
+
283
+
284
+
255
285
  以下問題のコードです。
256
286
 
257
287
 

9

問題点を図示しました。

2021/01/05 10:36

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,14 @@
4
4
 
5
5
 
6
6
 
7
+ 本来ならこうなるはずが
8
+
9
+ ![イメージ説明](29ffef38fea60ec48a34da70b9acea9e.jpeg)
10
+
11
+ 下のようになります。
12
+
13
+ ![イメージ説明](9a40599e0bf72812bfc5785c2a165aa8.jpeg)
14
+
7
15
  ここに言語を入力
8
16
 
9
17
  html CSS
@@ -12,12 +20,6 @@
12
20
 
13
21
  以下問題のコードになります。
14
22
 
15
- 全ては載せきれないので
16
-
17
- 崩れてしまう部分に限定するとこちらです。
18
-
19
- 1点目がこちらです
20
-
21
23
 
22
24
 
23
25
  ```
@@ -122,7 +124,17 @@
122
124
 
123
125
 
124
126
 
127
+ 本来こうなるはずが
128
+
129
+ ![イメージ説明](0e4699f0e6073778227ddf1b92e55b13.jpeg)
130
+
131
+ 下のようになります。
132
+
133
+ ![イメージ説明](8ed72aed85b9c9c445539a6081df5d72.jpeg)
134
+
135
+
136
+
125
- 2点目がこちらです
137
+ 以下問題のコードです。
126
138
 
127
139
 
128
140
 
@@ -230,7 +242,17 @@
230
242
 
231
243
  ```
232
244
 
245
+
246
+
247
+ 本来こうなるはずが
248
+
249
+ ![イメージ説明](e99af6008fc6d197c0eb176ce3cc98c6.jpeg)
250
+
251
+ 下のようになります。
252
+
253
+ ![イメージ説明](951b29b17466532cdf63582166d01a7c.jpeg)
254
+
233
- 3つ目がこちらです
255
+ 以下問題のコードです。
234
256
 
235
257
 
236
258
 

8

2021/01/05 10:27

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。
4
4
 
5
- ~~> 打ち消し線~~
6
-
7
5
 
8
6
 
9
7
  ここに言語を入力

7

2021/01/05 03:13

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。
4
4
 
5
+ ~~> 打ち消し線~~
6
+
7
+
8
+
5
9
  ここに言語を入力
6
10
 
7
11
  html CSS

6

2021/01/05 03:12

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  コード
10
10
 
11
- ```以下問題のコードになります。
11
+ 以下問題のコードになります。
12
12
 
13
13
  全ては載せきれないので
14
14
 
@@ -18,6 +18,8 @@
18
18
 
19
19
 
20
20
 
21
+ ```
22
+
21
23
  <body class="body2">
22
24
 
23
25
  <div class="invi">
@@ -114,12 +116,16 @@
114
116
 
115
117
  }
116
118
 
119
+ ```
120
+
117
121
 
118
122
 
119
123
  2点目がこちらです
120
124
 
121
125
 
122
126
 
127
+ ```
128
+
123
129
     <form method="POST" action="mailto:@gmail.com">
124
130
 
125
131
                                                        <div class="form1">
@@ -220,10 +226,14 @@
220
226
 
221
227
 
222
228
 
229
+ ```
230
+
223
231
  3つ目がこちらです
224
232
 
225
233
 
226
234
 
235
+ ```
236
+
227
237
  <div class="back1">
228
238
 
229
239
                                                        <p class="p5">~準備中です~</p> </div>
@@ -265,3 +275,5 @@
265
275
               border-radius: 8px;
266
276
 
267
277
  }
278
+
279
+ ```

5

2021/01/05 03:08

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,13 @@
2
2
 
3
3
  今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。
4
4
 
5
-
5
+ ここに言語を入力
6
+
6
-
7
+ html CSS
8
+
9
+ コード
10
+
7
- 以下問題のコードになります。
11
+ ```以下問題のコードになります。
8
12
 
9
13
  全ては載せきれないので
10
14
 

4

2021/01/05 01:31

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -6,8 +6,6 @@
6
6
 
7
7
  以下問題のコードになります。
8
8
 
9
- 失礼致しました。
10
-
11
9
  全ては載せきれないので
12
10
 
13
11
  崩れてしまう部分に限定するとこちらです。

3

2021/01/04 23:25

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,265 @@
1
1
  [リンク内容](http://xs043938.xsrv.jp/Port.html)
2
2
 
3
3
  今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。
4
+
5
+
6
+
7
+ 以下問題のコードになります。
8
+
9
+ 失礼致しました。
10
+
11
+ 全ては載せきれないので
12
+
13
+ 崩れてしまう部分に限定するとこちらです。
14
+
15
+ 1点目がこちらです
16
+
17
+
18
+
19
+ <body class="body2">
20
+
21
+ <div class="invi">
22
+
23
+ <div class="container">
24
+
25
+              <div class="row">
26
+
27
+                            <div class="col-md-12 col-xs-12">
28
+
29
+             
30
+
31
+                                                       <div class="back10">
32
+
33
+                                                                    <div class="back20">
34
+
35
+                                                                                  <p class="p50">
36
+
37
+                                                                                               Webデザインを通して人と人とをつなぎ、想いや価値を届けるお手伝いをしたいと考えています。
38
+
39
+                                                                                  </p>
40
+
41
+                                                                    </div>
42
+
43
+                                                       </div>
44
+
45
+
46
+
47
+ CSS
48
+
49
+
50
+
51
+ .p50{
52
+
53
+  
54
+
55
+              width: 45%;
56
+
57
+              height: 70%;
58
+
59
+              font-size: 20px;
60
+
61
+              line-height: 40px;
62
+
63
+              writing-mode: vertical-rl;
64
+
65
+              text-orientation: upright;
66
+
67
+              font-family: 'SimSun';
68
+
69
+              z-index: 10;
70
+
71
+              margin-top: -25%;
72
+
73
+              color: #ffffff;
74
+
75
+              z-index: 3;
76
+
77
+                display        : inline-block;
78
+
79
+       letter-spacing : 4px;                /* 文字間 */
80
+
81
+                            text-shadow    :
82
+
83
+        2px  2px 1px #669999,
84
+
85
+       -2px  2px 1px #669999,
86
+
87
+        2px -2px 1px #669999,
88
+
89
+       -2px -2px 1px #669999,
90
+
91
+        2px  0px 1px #669999,
92
+
93
+        0px  2px 1px #669999,
94
+
95
+       -2px  0px 1px #669999,
96
+
97
+        0px -2px 1px #669999;        /* 文字の影 */
98
+
99
+  
100
+
101
+ }
102
+
103
+
104
+
105
+ .back20{
106
+
107
+   position: absolute;
108
+
109
+   margin-left: 30%;
110
+
111
+   margin-top: -15%;
112
+
113
+ }
114
+
115
+
116
+
117
+ 2点目がこちらです
118
+
119
+
120
+
121
+    <form method="POST" action="mailto:@gmail.com">
122
+
123
+                                                       <div class="form1">
124
+
125
+                                                                    <div>
126
+
127
+                                                                                  <input type="text" name="name"
128
+
129
+                                                                                  class="form2">
130
+
131
+                                                                    </div>
132
+
133
+                                                                    <div>
134
+
135
+                                                                                  <input type="email" name="mail"
136
+
137
+                                                                                  class="form3">
138
+
139
+                                                                    </div>
140
+
141
+
142
+
143
+ <input type="submit" name="送信"　
144
+
145
+                                                                    value="Submit" class="submit">
146
+
147
+                                                       </div>
148
+
149
+                                         </form>
150
+
151
+
152
+
153
+
154
+
155
+ .form1{
156
+
157
+              width: 70%;
158
+
159
+              margin-left: 15%;
160
+
161
+              margin-top: 60px;
162
+
163
+ }
164
+
165
+ .form2{
166
+
167
+              width: 80%;
168
+
169
+              border-radius: 5px;
170
+
171
+              outline: none;
172
+
173
+              border: solid 1px;
174
+
175
+ }
176
+
177
+ .form3{
178
+
179
+              width: 80%;
180
+
181
+              margin-bottom: 50px;
182
+
183
+              margin-top: 50px;
184
+
185
+              border-radius: 5px;
186
+
187
+              outline: none;
188
+
189
+              border: solid 1px;
190
+
191
+ }
192
+
193
+
194
+
195
+ .submit{
196
+
197
+              width: 50%;
198
+
199
+              border-radius: 5px;
200
+
201
+              outline: none;
202
+
203
+              border: solid 1px;
204
+
205
+              color: #ffffff;
206
+
207
+              font-family: 'SimSun';
208
+
209
+              background-color: #669999;
210
+
211
+              margin-left: 85%;
212
+
213
+              margin-top: -10%;
214
+
215
+              font-size: 20px;
216
+
217
+ }
218
+
219
+
220
+
221
+ 3つ目がこちらです
222
+
223
+
224
+
225
+ <div class="back1">
226
+
227
+                                                       <p class="p5">~準備中です~</p> </div>
228
+
229
+
230
+
231
+ .p5{
232
+
233
+              font-size: 30px;
234
+
235
+              margin-top: 50px;
236
+
237
+              margin-bottom: 40px;
238
+
239
+              font-weight: bold;
240
+
241
+              font-family: cursive;
242
+
243
+              display: block;
244
+
245
+              width: 100%;
246
+
247
+              text-align: center;
248
+
249
+ }
250
+
251
+
252
+
253
+ .back1{
254
+
255
+              width: 70%;
256
+
257
+              height: 10%;
258
+
259
+              margin-left: 15%;
260
+
261
+              background-color: #ffff99;
262
+
263
+              border-radius: 8px;
264
+
265
+ }

2

2021/01/04 23:18

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,3 @@
1
- http://xs043938.xsrv.jp/Port.html
1
+ [リンク内容](http://xs043938.xsrv.jp/Port.html)
2
2
 
3
3
  今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。

1

2021/01/04 14:59

投稿

fusei
fusei

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,3 @@
1
1
  http://xs043938.xsrv.jp/Port.html
2
2
 
3
- 今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由が分かれば教えて頂きたいです。
3
+ 今現在上記のサイトのレイアウトの確認をしているのですがAndroidの実機(GALAXY10)、PC版Chromeのデベロッパーツール上のiPhone検証ではレイアウトの崩れがありません。しかし実機のiPhone7 やその他iPhone実機ではレイアウトが崩れてしまいます。どなたか理由と対処法が分かれば教えて頂きたいです。