質問編集履歴
4
追記３：解決したコードを書いておきます
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -157,3 +157,45 @@
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
こんな感じです！！！ すみません、ヘルプミー！！！
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
（追記３）
|
|
164
|
+
|
|
165
|
+
コメントに書いたコードをこっちにも貼っておきます
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
```js
|
|
170
|
+
|
|
171
|
+
var isSP = (window.navigator.userAgent.indexOf('iPhone') > 0) || (window.navigator.userAgent.indexOf('iPod') > 0) || (window.navigator.userAgent.indexOf('Android') > 0);
|
|
172
|
+
|
|
173
|
+
var isTate = (window.innerHeight > window.innerWidth);
|
|
174
|
+
|
|
175
|
+
if (isSP) {//スマホのとき
|
|
176
|
+
|
|
177
|
+
if (isTate){//縦向き（ポートレートのとき）
|
|
178
|
+
|
|
179
|
+
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
180
|
+
|
|
181
|
+
console.log("縦向き");
|
|
182
|
+
|
|
183
|
+
} else {//横向きのとき
|
|
184
|
+
|
|
185
|
+
document.write('<meta name="viewport" content="width=1200, user-scalable=yes">');
|
|
186
|
+
|
|
187
|
+
console.log("横向き");
|
|
188
|
+
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
}else{//スマホじゃないとき
|
|
192
|
+
|
|
193
|
+
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
|
|
194
|
+
|
|
195
|
+
console.log("スマホじゃないとき");
|
|
196
|
+
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
```
|
3
追記２：出力が期待通りである点を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -52,6 +52,16 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
+
（追記２）
|
|
56
|
+
|
|
57
|
+
javascriptはhtmlにインラインで記載していまして、htmlのheadの中に記載しており、出力している箇所は期待通りの出力ができているはずです。
|
|
58
|
+
|
|
59
|
+
下記のコードにconsole.log()で出力の検証をしたときの箇所について追記しておきます。
|
|
60
|
+
|
|
61
|
+
（/追記２）
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
55
65
|
```js
|
|
56
66
|
|
|
57
67
|
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {//スマホのとき
|
|
@@ -60,15 +70,21 @@
|
|
|
60
70
|
|
|
61
71
|
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
62
72
|
|
|
73
|
+
console.log("縦向き");
|
|
74
|
+
|
|
63
75
|
} else {//横向きのとき
|
|
64
76
|
|
|
65
77
|
document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
78
|
+
|
|
79
|
+
console.log("横向き");
|
|
66
80
|
|
|
67
81
|
}
|
|
68
82
|
|
|
69
83
|
}else{//スマホじゃないとき
|
|
70
84
|
|
|
71
85
|
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
|
|
86
|
+
|
|
87
|
+
console.log("スマホじゃないとき");
|
|
72
88
|
|
|
73
89
|
}
|
|
74
90
|
|
2
スクショを追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -17,6 +17,28 @@
|
|
|
17
17
|
スマホ横向きのときに下記のように1200pxに合わせて表示してくれたらいいのに、
|
|
18
18
|
|
|
19
19
|
アクセスすると、拡大した状態になってしまいます。
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
（追記）
|
|
24
|
+
|
|
25
|
+
求める画面
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
実際の画面
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
このように、拡大された状態になってしまいます。
|
|
38
|
+
|
|
39
|
+
（/追記）
|
|
40
|
+
|
|
41
|
+
|
|
20
42
|
|
|
21
43
|
なんででしょう？
|
|
22
44
|
|
|
@@ -40,7 +62,7 @@
|
|
|
40
62
|
|
|
41
63
|
} else {//横向きのとき
|
|
42
64
|
|
|
43
|
-
document.write('<meta name="viewport" content="1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
65
|
+
document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
44
66
|
|
|
45
67
|
}
|
|
46
68
|
|
|
@@ -62,15 +84,23 @@
|
|
|
62
84
|
|
|
63
85
|
} else {//横向きのとき
|
|
64
86
|
|
|
65
|
-
document.write('<meta name="viewport" content="1200, initial-scale=1.0, maximum-scale=1.0">');
|
|
87
|
+
document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0">');
|
|
66
88
|
|
|
67
89
|
|
|
68
90
|
|
|
69
91
|
```
|
|
70
92
|
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
※content=1200っていうのは間違いだったようで、content=width=1200に修正しました（画面には変化なし）
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
71
99
|
maximum-scale=1.0
|
|
72
100
|
|
|
73
|
-
のところをいろいろ変えてみてもうまくいかない・・・。
|
|
101
|
+
のところをいろいろ変えてみてもうまくいかない・・・。（画面には特に変化なし）
|
|
102
|
+
|
|
103
|
+
|
|
74
104
|
|
|
75
105
|
|
|
76
106
|
|
|
@@ -79,6 +109,20 @@
|
|
|
79
109
|
initial-scale=1200
|
|
80
110
|
|
|
81
111
|
ってのも試してみたけど、違うみたい・・・。
|
|
112
|
+
|
|
113
|
+
こんな感じ。
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
ちなみに、PCではこのように見えています。
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
（上記画像2点追記）
|
|
82
126
|
|
|
83
127
|
|
|
84
128
|
|
1
initial-scale=1200を試したことを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -74,6 +74,14 @@
|
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
|
|
77
|
+
あと
|
|
78
|
+
|
|
79
|
+
initial-scale=1200
|
|
80
|
+
|
|
81
|
+
ってのも試してみたけど、違うみたい・・・。
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
77
85
|
#環境
|
|
78
86
|
|
|
79
87
|
Chromeのバージョンは最新です。
|