質問編集履歴
4
追記３：解決したコードを書いておきます
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -77,4 +77,25 @@
|
|
|
77
77
|
|
|
78
78
|
|
|
79
79
|
|
|
80
|
-
こんな感じです！！！ すみません、ヘルプミー！！！
|
|
80
|
+
こんな感じです！！！ すみません、ヘルプミー！！！
|
|
81
|
+
|
|
82
|
+
（追記３）
|
|
83
|
+
コメントに書いたコードをこっちにも貼っておきます
|
|
84
|
+
|
|
85
|
+
```js
|
|
86
|
+
var isSP = (window.navigator.userAgent.indexOf('iPhone') > 0) || (window.navigator.userAgent.indexOf('iPod') > 0) || (window.navigator.userAgent.indexOf('Android') > 0);
|
|
87
|
+
var isTate = (window.innerHeight > window.innerWidth);
|
|
88
|
+
if (isSP) {//スマホのとき
|
|
89
|
+
if (isTate){//縦向き（ポートレートのとき）
|
|
90
|
+
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
91
|
+
console.log("縦向き");
|
|
92
|
+
} else {//横向きのとき
|
|
93
|
+
document.write('<meta name="viewport" content="width=1200, user-scalable=yes">');
|
|
94
|
+
console.log("横向き");
|
|
95
|
+
}
|
|
96
|
+
}else{//スマホじゃないとき
|
|
97
|
+
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
|
|
98
|
+
console.log("スマホじゃないとき");
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
```
|
3
追記２：出力が期待通りである点を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,15 +25,23 @@
|
|
|
25
25
|
JavaScriptで場合分けをすればいいのかなと思って、
|
|
26
26
|
以下のように書きました。
|
|
27
27
|
|
|
28
|
+
（追記２）
|
|
29
|
+
javascriptはhtmlにインラインで記載していまして、htmlのheadの中に記載しており、出力している箇所は期待通りの出力ができているはずです。
|
|
30
|
+
下記のコードにconsole.log()で出力の検証をしたときの箇所について追記しておきます。
|
|
31
|
+
（/追記２）
|
|
32
|
+
|
|
28
33
|
```js
|
|
29
34
|
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {//スマホのとき
|
|
30
35
|
if (window.innerHeight > window.innerWidth){//縦向き（ポートレートのとき）
|
|
31
36
|
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
37
|
+
console.log("縦向き");
|
|
32
38
|
} else {//横向きのとき
|
|
33
39
|
document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
40
|
+
console.log("横向き");
|
|
34
41
|
}
|
|
35
42
|
}else{//スマホじゃないとき
|
|
36
43
|
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
|
|
44
|
+
console.log("スマホじゃないとき");
|
|
37
45
|
}
|
|
38
46
|
|
|
39
47
|
```
|
2
スクショを追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,6 +8,17 @@
|
|
|
8
8
|
#不具合、困りごと
|
|
9
9
|
スマホ横向きのときに下記のように1200pxに合わせて表示してくれたらいいのに、
|
|
10
10
|
アクセスすると、拡大した状態になってしまいます。
|
|
11
|
+
|
|
12
|
+
（追記）
|
|
13
|
+
求める画面
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
実際の画面
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
このように、拡大された状態になってしまいます。
|
|
20
|
+
（/追記）
|
|
21
|
+
|
|
11
22
|
なんででしょう？
|
|
12
23
|
|
|
13
24
|
#いまのコード
|
|
@@ -19,7 +30,7 @@
|
|
|
19
30
|
if (window.innerHeight > window.innerWidth){//縦向き（ポートレートのとき）
|
|
20
31
|
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
21
32
|
} else {//横向きのとき
|
|
22
|
-
document.write('<meta name="viewport" content="1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
33
|
+
document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">');
|
|
23
34
|
}
|
|
24
35
|
}else{//スマホじゃないとき
|
|
25
36
|
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
|
|
@@ -30,16 +41,27 @@
|
|
|
30
41
|
こんなのも試してみました。
|
|
31
42
|
```js
|
|
32
43
|
} else {//横向きのとき
|
|
33
|
-
document.write('<meta name="viewport" content="1200, initial-scale=1.0, maximum-scale=1.0">');
|
|
44
|
+
document.write('<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0">');
|
|
34
45
|
|
|
35
46
|
```
|
|
47
|
+
|
|
48
|
+
※content=1200っていうのは間違いだったようで、content=width=1200に修正しました（画面には変化なし）
|
|
49
|
+
|
|
36
50
|
maximum-scale=1.0
|
|
37
|
-
のところをいろいろ変えてみてもうまくいかない・・・。
|
|
51
|
+
のところをいろいろ変えてみてもうまくいかない・・・。（画面には特に変化なし）
|
|
38
52
|
|
|
53
|
+
|
|
39
54
|
あと
|
|
40
55
|
initial-scale=1200
|
|
41
56
|
ってのも試してみたけど、違うみたい・・・。
|
|
57
|
+
こんな感じ。
|
|
58
|
+
|
|
42
59
|
|
|
60
|
+
ちなみに、PCではこのように見えています。
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
（上記画像2点追記）
|
|
64
|
+
|
|
43
65
|
#環境
|
|
44
66
|
Chromeのバージョンは最新です。
|
|
45
67
|
OSはWindows10で見てます。
|
1
initial-scale=1200を試したことを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -36,6 +36,10 @@
|
|
|
36
36
|
maximum-scale=1.0
|
|
37
37
|
のところをいろいろ変えてみてもうまくいかない・・・。
|
|
38
38
|
|
|
39
|
+
あと
|
|
40
|
+
initial-scale=1200
|
|
41
|
+
ってのも試してみたけど、違うみたい・・・。
|
|
42
|
+
|
|
39
43
|
#環境
|
|
40
44
|
Chromeのバージョンは最新です。
|
|
41
45
|
OSはWindows10で見てます。
|