システムエンジニアライフ

都内在住のオープンWEB系システムエンジニアのエンジニアライフのブログです。

WEBブラウザのデザインが同じソースコードなのに違う?

これは私がハマったお話です。

 

本番環境と検証環境で同じソースコードをアップしているのになぜか比較すると文字が小さかったり、レスポンシブデザインのスタイルが違うのがあたってたりしてました。

 

最初は気のせいかなーと思ってスルーしてたのですが、同僚も同じ事を言っていたのでどうやら勘違いじゃないぞとなり調べ始めました。

 

何かアップされているファイルに差分があるんじゃないのか?

削除し忘れのファイル?、編集中のファイルが残っている?と比較してみましたが、差分が見つからず、これはソースコードではなくてサーバ設定の違いじゃないのかと思い始めなかなか骨が折れそうだと感じていました。

 

で同僚に検証環境と本番環境はどう違う?って尋ねたところ検証環境の方が文字が小さいと彼は言う。

 

ん?こっちは本番環境の方が文字が小さいんだけど。。

 

え、何?サーバ側じゃなくてクライアント側の環境の問題?となって半ば諦めが出てきてたところ、同僚が放った一言。

 

あ、ごめん。ブラウザの片方のタブ、縮小になってたわ。

 

 

ほんまや。自分もやわ。

 

何気にブラウザの表示拡大・縮小って気づかずに何かの拍子に変わってる事がありますよね。そしてブラウザの表示拡大・縮小の設定ってキャッシュされてるみたいなのでブラウザ閉じてまた復帰したときも適用されてるんですよね。

 

Chromeだと下記画像の赤枠のところに表示拡大・縮小の設定のマークが出てるんですけどなかなか気づきにくい。。

 

f:id:taksakam:20200524223203p:plain