2016-10-09

デベロッパーツールで幅を変えると拡大率が勝手に変化する

はじめに

レスポンシブデザインの確認をするために使用していた、chromeのデベロッパーツールのデバイスモードで最近、横幅を1px変更する度に拡大率が変わって画面がガタガタするようになりました。デバイスを指定するのではなく、横幅の値を下矢印のキーで直接減少させてレスポンシブデザイン確認をしていたので、画面の動きが非常に煩わしい。とりあえずストレスなく使おうと施策したことについて、少し書いておきます。

画面全体に拡大しようとする

例えば横幅1980pxの状態を確認したいとき、小さいノートPCでは100%では表示できないので、拡大率を50%にして表示すると、最初は素直に表示されますが、1pxでも値を下げると、拡大率が54%になり、勝手に画面の大きさに合わせた拡大率で表示しようとします。しかも1px値を下げたつもりが、数十px下がったりします。

値を下げると上げられない

更に、縦幅を指定せず、横幅の値を徐々に下げた後、再び上矢印キーで上げようとすると、なぜか値が上がらなくなったりします。値を下げ続けて自動で100%になった拡大率を50%に下げて、値を上げようとすると拡大率が100%になり、横幅が動かなくなります。

対処方法

設定などを見てみてもこれに関するものが見当たらず、応急処置的ですが、対処法として見つけたのがGUIで直接横幅を変える事です。デバイスモードの画面で、右と下にマウスで直接掴んで操作することで画面の縦横を変えられるバー(右は「||」、下は「=」のようなマーク)があるので、それを移動させることで拡大率を変更せずに横幅を変更することが出来ます。ただし、1px単位ではなく、3px以上など多少値が大きくなります。

さいごに

私の思い違いでなければ、つい最近までは上に書いたような現象は見られなかったと思います。別の環境でも試してみましたが、やはり同じような挙動をしましたし、何かしらのアップデートがあったのでしょうか。とりあえず、横幅を1980pxから320px程度まで、ズラーっと流して眺めていた人間としては、非常に違和感を感じた出来事でした。

ちなみに、私はデベロッパーツールを画面横に出していてかつ解像度の低いノートPなので、デバイスモードの表示画面が小さくなっている分、拡大率が自動的に切り替わる影響をもろに受けていますが、解像度が高いPCでデベロッパーツールを画面下や別タブで出している人は、常に拡大率が100%になっていると思われるので、違和感を感じることが無いかもしれません。



コメントする(※は必須項目です)













画像認証