I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:
@media screen and (max-width: 767px){
/* Safari responds to css here */
}
@media screen and (max-width: 640px){
/* css here is ignored by Safari */
}
Firefox and Chrome both respond appropriately. Does anyone have any ideas about what is going on?
You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.
edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.