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

ブラウザGoogle Chrome

問題発生

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

・高解像度対応が原因?


私だけ?


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

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

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

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

FireFox


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

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


IE


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

Yahoo!メール

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


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

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

画面解像度


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


画面上の文字


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

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

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

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


原因判明?


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

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

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

結論

 閲覧数:288 投稿日: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 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 33
12 FireFox5.0のバー表示が崩れ、元に戻せなくなったら… 33
13 rssページが正しく表示されない/Google 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 「position:absolute;」が分からなくなったときに見るエントリー 32
19 ページで使用されている「id名」「class名」をChromeで取得したい   32
20 私がよく利用するFont Awesome 無料アイコン。毎回探すことが面倒なので 32
2021/7/24 19:37 更新
週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新