1

I recently deployed a website after testing for responsiveness in chrome developer tools that displays correctly in chrome developer tools and on mobile in Firefox but not chrome. Here's what it looks like in the developer tools. website in chrome developer tools

Here's what it looks like on chrome on a mobile device.

website in chrome on mobile You can see that the background image is gone and the header image is off to the left.

I thought it might be because of an older version of chrome so I managed to get a look at it on a newer version of chrome.

website in newer chrome on mobile So on this newer one the picture is no longer to the left but the background is still missing.

So it works when I'm viewing the website on a desktop and reduce the size to mobile and on Firefox but breaks in chrome on mobile.

I've tried different versions of chrome, uninstalling and reinstalling chrome, using both the chrome and firefox developer tools and I've also tried finding similar questions already answered on Stack Overflow and the most similar says to make sure to have <meta name="viewport" content="width=device-width, initial-scale=1"/> which I have and I even saw a post saying to add maximum-scale=1 which I tried.

Since it works fine in the developer tools I've been flying blind trying things and redeploying.

Harmony
  • 99
  • 2
  • 9
  • 1
    I can't guess the cause of the problem but I think you should connect Chrome's devtools to the browser on the actual device (or use an emulator on your PC) and investigate the problem, it's easy, and there are many tutorials. – wOxxOm Apr 22 '19 at 05:06
  • Possible duplicate of [How to replicate background-attachment fixed on iOS](https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios) – user2340824 Apr 22 '19 at 06:12
  • @wOxxOm thank you, my next idea was something like that. – Harmony Apr 22 '19 at 06:27
  • @user2340824 I'm using android devices. – Harmony Apr 22 '19 at 06:28
  • Regardless, if you read the post, that actual CSS Property is disabled in the majority of mobile browsers and isn't specific to Safari/iOS, and would not be reproducible within Desktop Chrome Devtools – user2340824 Apr 22 '19 at 06:58

2 Answers2

1

I run into the same problem, today is 2020-03-09... It seems the @media query does not work in chrome in my iPhone SE, but safari is OK. Also the app 'Google' is working too, you can search it from app store, it has a big 'G' with 4 colors, red/yellow/green/blue, as its symbol.

delusionxb
  • 359
  • 3
  • 8
0

You mentioned that you're using an Android device. Try remote debugging. This lets you inspect the page as it was truly rendered on your mobile device, from a DevTools window on your desktop.

For iOS see Inspecting Safari. Unfortunately I couldn't find an official doc.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120