Twitter, Chrome, and .jpg_large files

I know, it’s 2018– who uses the Twitter website in the Google Chrome web browser any more, when you can do so much of your Twitter experience in mobile apps? Well, have you ever tried removing a member from a list on the Twitter Android app?

I rest my case.

So, if you’ve ever tried to save a Twitter image file in Google Chrome, you’ve probably noticed it gets saved with the peculiar file extension of .jpg_large, rather than plain old .jpg.  This has been a known issue on Chromium’s Issue Tracker since 2013, and closed with a status of “Won’t Fix” because the Chromium developers felt this was Twitter’s problem to solve.

Fortunately, the folks behind the “Refined Twitter” Chrome Extension didn’t feel the same way.

 

CSS Media Queries Device Breakpoints vs. Windows Display

Windows 10 Display Settings, with text size at 125%.
Windows 10 Display Settings, with text size at 125%.

Ran into an interesting problem last week, and wanted to share it here while it was still fresh in my mind.

I’d received a support ticket from a client who was seeing the mobile version of our website, even though she was viewing it on a desktop with Google Chrome’s zoom level set at 100%. If she decreased Chrome’s zoom level to 90%, the website would suddenly transition into the desktop version.

It turns out there were two factors contributing to this issue:

  1. Her older monitor supported a maximum screen width of 1280 pixels.
  2. Her Windows Display settings had a “Change the size of text, apps, and other items” feature set to 125%.

Since the 125% setting effectively removes 25% of the total screen width (1280 – 320 = 960 pixels), Google Chrome fell beneath the 1024 pixel width for the desktop media query, and was displaying the tablet/mobile version.  Changing Chrome’s zoom level down to 90% was an effective increase of 10% screen width, increasing the effective screen width to 1056 pixels– which caused the CSS media query for desktops to suddenly come into effect.

With the higher resolutions on newer monitors and/or laptops, you’re less likely to encounter this issue because it would take a greater percentage to drop a higher resolution below the 1024 pixel threshold.

Hope this helps someone else solve this issue, if they encounter it.