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

ブラウザGoogle Chrome

問題発生

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

・高解像度対応が原因?


私だけ?


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

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

 閲覧数:455 投稿日: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

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

FireFox


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

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


IE


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

Yahoo!メール

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


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

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

画面解像度


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


画面上の文字


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

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

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

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


原因判明?


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

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

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

結論

 閲覧数:431 投稿日: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が重くて困っている。解決できない 41
2 Chromeバージョンアップでフォント指定が効かなくなる 41
3 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 38
4 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 38
5 IE9だけレイアウトが崩れる 36
6 期待した通り動作しなかったため削除した Chrome 拡張機能 36
7 「Twitter Bootstrap」導入したらおかしくなった時、試した方がよいかもしれないこと 36
8 URLが折り返し表示されない/Google Chrome 34
9 Chromeはアホなコ 34
10 Chromeをインストール出来ない 34
11 FireFox5.0のバー表示が崩れ、元に戻せなくなったら… 33
12 rssページが正しく表示されない/Google Chrome 33
13 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 33
14 Chrome「39.0.2171.95 m」でデザインが崩れる 33
15 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 33
16 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 33
17 resizeが効かない場合は、min-heightを設定してみる 32
18 ページで使用されている「id名」「class名」をChromeで取得したい   32
19 「position:absolute;」が分からなくなったときに見るエントリー 32
20 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 32
2022/10/03 23:17 更新
週間人気ページランキング / 9-26 → 10-2
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 71
2 16進数カラーコード / 2進数 37
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 19
5 「bgcolor」「background-color」「background」の違い | CSS 16
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 14
7 Design 0 14
8 RGBの種類 / ビットカラー | RGB(色) 12
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 11
10 「属性」「プロパティ」「アトリビュート」の違い | CSS 9
10 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 9
11 rem | 単位(CSS) 8
11 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 8
11 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 8
11 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 8
12 カラーコード / 色コード | カラーコード(色) 7
13 パッケージ化されてない拡張機能 | Chrome 拡張機能 6
2022/10/3 1:01 更新