回答編集履歴
1
原因と解決方法
test
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
|
-
|
|
1
|
+
kei344さん、x_xさんの回答内容を元に調べ直したところ原因と解決方法がわかりましたので記載しておきます。（メディアクエリの仕様に関する技術的な改善アプローチではなく、あくまで今回のケースに対する原因と改善方法です。）
|
|
2
2
|
|
|
3
|
-
別のパソコンを使って検証したところ、問題なく表示されました。
|
|
4
3
|
|
|
4
|
+
|
|
5
|
-
|
|
5
|
+
まず原因としてはx_xさんの回答にあるようにwidthが767.5pxになるとメディアクエリで指定したCSSが適用されなくなりレイアウトが崩れるといったものでした。
|
|
6
|
+
|
|
7
|
+
しかし、ブラウザの検証機能で指定した数値は 767px であり、767.5pxではありません。
|
|
8
|
+
|
|
9
|
+
ということは何か別の要因がwidth幅の計算結果をおかしくしているということになります。
|
|
10
|
+
|
|
11
|
+
そのためパソコン本体の設定を調べ直したところ、「ディスプレイの拡大率」が影響しているということがわかりました。既定値では150%になっている倍率を100%や200%にしたあとに、 767px で検証するとレイアウトは崩れませんでした。
|
|
12
|
+
|
|
13
|
+
ただし、拡大率を100%にするとアイコンやタスクバーなどが全体的に小さくなり、200%にすると逆にデカくなりすぎるので、試す際にはデスクトップ上にあるファイル等をまとめておくことをオススメします。（並び順もぐちゃぐちゃになるので注意）
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
解決方法の流れとしては、
|
|
18
|
+
|
|
19
|
+
「コントロールパネル」→「デスクトップのカスタマイズ」→「ディスプレイ」
|
|
20
|
+
|
|
21
|
+
という項目まで進み、「すべてのディスプレイで同じ拡大率を使用する」にチェックを入れたあと、100%や200%などのキリの良い倍率を選択して「適用」ボタンをクリックといった感じになります。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
ちなみにディスプレイの拡大率を100%以上にしている場合、ソフトウェアによっては本来表示されるはずの部分が表示されなくなるなどの問題が起きます。
|
|
26
|
+
|
|
27
|
+
一時的に画面を大きくして見たい場合には、Windowsキーを押しながら+キーまたは-キーを押すことで「拡大鏡」というツールが使えるので、そちらをオススメします。
|