Safari on iOS doesn't work with media queries

Question

My problem is that I cannot get media query to work on iPhone 5s iOS 9.3.2 Safari. I have a full screen video on my page what I'd like to change into an image on mobile. I have followed this tutorial to make it happen.

I have specified the viewport like this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

I have included !important tag in every css entry I need to be changed when being 640px, like this:

@media only screen and (max-device-width: 640px) {

 html {
  background: url('image.jpg') no-repeat center center fixed !important;
  background-color: rgba(0, 0, 0, 0) !important;
 }
 #video {
  display: none !important; 
 }
 body{
  background: rgba(0, 0, 0, 0) !important; 
  /*also tried with background:transparent !important*/
 }
}

I decided to use 640px as it is the exact amount of pixels what gets rendered on iPhone 5s according to this source.

I have specified that the background should be transparent as it seems to be the only option to work around the default template style. Meaning when background becomes transparent the background image shows up.

I have read this and this. I have applied the suggested solutions to my problem but none of them worked.

NOTE: I don't have the Mac machine to test this issue via iPhone's web inspector. Making a VM on Windows seems to be not a one hour job.

I have tested my code in Chrome 50.0.2661.102 m (64-bit), Mozilla 46.0.1 and Edge on Windows Phone everything works fine.

I have tried to work with Safari 5.1.7 (the last version released for Windows), but it seems to be very outdated (as expected).

I have also cleared the cache with Ctrl+Shift+R and tried to use Incognito mode.

UPDATE: if I specify the color (for the sake of testing) before the image I will be then able to see the specified color in Safari, but no image:

background: green url('image.jpg') no-repeat center center fixed !important;

Any idea how to solve this?

@JentiDabhi fixed the question. But this is not the issue with current config. — Alex Ljamin, Jun 06 '16 at 12:00

score 0 · Answer 1 · edited May 23 '17 at 10:29

While waiting for help I've found a workaround just for my case. Thanks to @daemeron's answer.

So instead of implementing separate styleheets for different devices it is just possible to hide the annoying Play button on the background by:

*::-webkit-media-controls-start-playback-button {
 display: none!important;
 -webkit-appearance: none
}

This works great on iPhone and Windows 10 mobile. Exactly what I was looking for.

Safari on iOS doesn't work with media queries

1 Answers1