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

ブラウザ ＞ Google Chrome

問題発生

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

・高解像度対応が原因？

私だけ？


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

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

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

公式フォーラム


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

37.0.2062.103


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

海外でも同様の現象が発生
I use Chrome 37.0.2062.103 (64-bit), problem still exist


FireFox

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

FireFox


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

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

IE


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

Yahoo!メール

　閲覧数:652　投稿日: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!メールを利用することもできますが、画面の表示が正しく行われない、画面の表示に時間がかかる、または一部機能が利用できない場合があります。


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

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

画面解像度


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

画面上の文字


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

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

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

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

原因判明？


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

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

　閲覧数:648　投稿日: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には注目してきたけど、もう参考にするのは止めよう
・詳細は不明だけど、きっとモバイルにシフトし過ぎたため、パソコン系の検証作業は甘くなっているのだろう

結論

　閲覧数:574　投稿日: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 URLが折り返し表示されない／Google Chrome 34
10 Chromeはアホなコ 34
11 Chromeをインストール出来ない 34
12 rssページが正しく表示されない／Google Chrome 33
13 FireFox5.0のバー表示が崩れ、元に戻せなくなったら… 33
14 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 33
15 Chrome「39.0.2171.95 m」でデザインが崩れる 33
16 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 33
17 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 33
18 resizeが効かない場合は、min-heightを設定してみる 32
19 「position:absolute;」が分からなくなったときに見るエントリー 32
20 ページで使用されている「id名」「class名」をChromeで取得したい 　 32
2024/4/19 9:11 更新
週間人気ページランキング ／ 4-12 → 4-18
順位 ページタイトル抜粋 アクセス数
1 16進数カラーコード ／ 2進数 29
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 13
4 Design 0 11
5 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 10
5 RGB ⇔ Lab | 色変換(色) 10
6 RGBの種類 ／ ビットカラー | RGB(色) 9
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 8
8 「bgcolor」「background-color」「background」の違い | CSS 7
9 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 6
9 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
10 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
11 画像大きさ | 他サイト調査(HTML) 3
11 カラーコード ／ 色コード | カラーコード(色) 3
11 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
11 イラスト素材 | デザイン 3
11 HSLとHSVの違い | 色変換(色) 3
11 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
12 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 2
2024/4/19 1:01 更新