Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる

ブラウザGoogle Chrome

問題発生

 状態:未解決  閲覧数:6,993  投稿日:2014-09-04  更新日:2014-09-05
Chromeがおかしくなった
・width認識が狭くなりレイアウトが崩れる
バージョン 37.0.2062.103 m
Google Chrome は最新版です。

・高解像度対応が原因?


私だけ?


・Twitter検索しても、同様の症状の人はいない
・私だけ?
・物凄く不安になる
・2時間近く調査するも、全く原因不明

ようやく同じような不具合発生者を発見

 閲覧数:627 投稿日:2014-09-05 更新日:2014-09-05

公式フォーラム


OSはwin7
タスクバー・タブ・アイコン全てが拡大されているので、
クロームで開いた全てのサイト表示が拡大される状況
Chrome36とChrome37を比べて、
TEXTBOXにプロポーショナルフォントが使用されている場合と、通常のテキストにボールドフォントが使用されている場合に幅が大きく異なるようです
[問題修正済み] Chrome 37: 文字がズームされた状態や不鮮明に表示されてしまう場合の対処方法 - Google プロダクト フォーラム


37.0.2062.103


バージョン 37.0.2062.103 m
Google Chrome は最新版です。
・全然直っていないじゃん!

海外でも同様の現象が発生


FireFox

 閲覧数:632 投稿日:2014-09-05 更新日:2014-09-05

FireFox


・Chromeはバージョンダウン不可につき、FireFoxへ退避
・ところが、FireFoxを開いたら、同じような症状に遭遇

どゆこと?
・FireFoxって、独立したブラウザじゃなかったの?
・Chromeと同じエンジンなの?
・もしかして、このブラウザ解釈が正しいの?
・これまでが間違っていただけ、ってこと?


IE


・しょうがないので、IE起動したら、ようやく以前の表示へ戻った
・しばらくこれで様子見

Yahoo!メール

 閲覧数:744 投稿日:2014-09-05 更新日:2014-09-05

画面解像度


1280×1024(推奨)なのに…
画面解像度が足りません

Yahoo!メールのご利用には、画面の解像度を1024×600ピクセル以上に設定する必要があります。以下の方法で画面の解像度を上げてください。

Windowsをご利用の方の設定手順(Windows 7の場合)

Windowsのデスクトップ画面上でマウスを右クリックし、「画面の解像度」を選択してください。
「解像度」をスライダーバーで、1024×600ピクセル以上に設定してください。
Mac OSをご利用の方の設定手順(Mac OS X Lionの場合)

画面左上のアップルメニューから、「システム環境設定」を選択してください。
ハードウェアのカテゴリにある「ディスプレイ」をクリックしてください。
「ディスプレイ」のタブが表示されていることを確認し、画面の解像度を1024×600ピクセル以上に設定してください。
上記以外の環境の方は、各OSのヘルプを「画面の解像度」などで検索し、手順を確認してください。

Yahoo!メールを利用する

このまま利用する
※このままYahoo!メールを利用することもできますが、画面の表示が正しく行われない、画面の表示に時間がかかる、または一部機能が利用できない場合があります。


画面解像度 と 画面上の文字設定

 閲覧数:644 投稿日:2014-09-05 更新日:2014-09-05

画面解像度


1280×1024(推奨)
・「コントロールパネル」-「画面の解像度の調整」


画面上の文字


・「コントロールパネル」-「画面の解像度の調整」-「テキストやその他の項目の変更」

[小 - 100% (既定)]
・テキストやその他の項目が標準サイズで表示

[中 - 125%]
・テキストやその他の項目が標準サイズの 125% (1.25 倍) に設定

[大 - 150%]
・テキストやその他の項目が標準のサイズの 150% (1.5 倍) に設定
・このオプションは、モニターがサポートしている解像度が 1200 × 900 ピクセル以上の場合にのみ表示


原因判明?


・意識していなかったが、ここを[大 - 150%]に設定していた
・もしかして、これが誤り?
・今までのPC設定がマズかったってこと?
・とりあえず、標準の[小 - 100% (既定)]へ変更

[小 - 100% (既定)]へ変更後、ブラウザで確認

 閲覧数:693 投稿日:2014-09-05 更新日:2014-09-05

画面上の文字


[小 - 100% (既定)]へ変更


ブラウザで確認


正常表示
・NHK、ライブドア、NAVERまとめ

文字が小さい
・Yahoo! JAPAN、このサイト

疑問点
・Yahoo! JAPANの文字が小さいのは何故?
・そういう仕様?
・Yahoo! JAPANに限って、そういうミスをしているわけないよね
・このサイトの文字が小さければ大きくしようと思うが、前提となる標準のブラウザ表示設定(特に文字の大きさ)が不明なので、どうしたら良いか分からない


Yahoo! JAPAN


フォントサイズを変更したい(文字の大きさ)
Yahoo!ニュースに、フォントサイズを変更する機能はありません。フォントサイズを変更したいときは、お使いのブラウザーの表示設定で変更してください。
・Yahoo! JAPANだけ文字が小さくて読みにくい
・設定変更しようとしたら、ログイン画面へ飛ばされる
・一方、NHKはゲスト状態で文字の大きさ変更可能だ
・これまでずっとYahoo! JAPANの真似ばかりしてきたライブドアの方が、文字の大きさをちゃんと最適化して表示している
・基準となるデザインとして、Yahoo! JAPANには注目してきたけど、もう参考にするのは止めよう
・詳細は不明だけど、きっとモバイルにシフトし過ぎたため、パソコン系の検証作業は甘くなっているのだろう

結論

 閲覧数:607 投稿日:2014-09-05 更新日:2016-11-25

原因


・推測だけど、不具合の原因は、Chromeバージョンが上がったことにより、Windows設定の文字の大きさを反映するよう変更されたことだと思われる

従来
・Chrome側でデフォルト文字の大きさを設定

バージョン 37.0.2062.103 m
・Windows設定の文字の大きさを反映するよう変更


変更履歴


・Chrome変更履歴はどこにあるの?
リリースノート(更新履歴)を整備して欲しい - Google プロダクト フォーラム
Google Chrome の更新の際、機能変更や UIの変更などがある場合は特に、
更新履歴やそのヘルプを用意して欲しいと思います
・激しく同意


「Google Chrome」のリリースノート(更新履歴)は公開されている



textareaを手動リサイズできない時は、ブラウザを落としてみる

Chromeバージョンアップでフォント指定が効かなくなる



類似度ページランキング
順位 ページタイトル抜粋
1 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる 86
2 Chromeが重くて困っている。解決できない 41
3 Chromeバージョンアップでフォント指定が効かなくなる 41
4 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 38
5 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 38
6 IE9だけレイアウトが崩れる 36
7 期待した通り動作しなかったため削除した Chrome 拡張機能 36
8 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと 36
9 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  35
10 URLが折り返し表示されない/Google Chrome 34
11 Chromeはアホなコ 34
12 Chromeをインストール出来ない 34
13 rssページが正しく表示されない/Google Chrome 33
14 FireFox5.0のバー表示が崩れ、元に戻せなくなったら… 33
15 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 33
16 Chrome「39.0.2171.95 m」でデザインが崩れる 33
17 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 33
18 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 33
19 resizeが効かない場合は、min-heightを設定してみる 32
20 「position:absolute;」が分からなくなったときに見るエントリー 32
2024/10/12 8:49 更新
週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新